شارك ملاحظات التعلم من التحكم في مفتاح Bootstrap (التبديل)

يعد المكون الإضافي لتبديل bootstrap عبارة عن عنصر تحكم في زر التبديل يتم تنفيذه لـ Bootstrap ، والذي يمكن أن يدعم تخصيص الأبعاد والألوان والسمات الأخرى. لا يوجد العديد من أزرار التبديل المستخدمة على مواقع الويب المحلية. Bootstrap تحظى بشعبية كبيرة في الخارج. لا أعرف ما إذا كنا لا نحب ذلك أم أنه مزعج ويصعب استخدامه لمواقع الويب. ومع ذلك ، فإن زر الفتح هذا هو الأكثر استخدامًا على الأجهزة المحمولة مثل الهواتف المحمولة ، وخصائص الشاشة تعززها لتطويرها بشكل أفضل.

وصف الوظيفة:

إدخال الاستخدام البسيط لنموذجين من Chekbox والراديو ، هناك المزيد من التأثيرات والوظائف لتصفح العروض التجريبية ، انقر فوق الزر للتبديل/إيقاف تشغيله بطريقة انزلاقية.

تعليمات للاستخدام:

1. تقديم ملفات CSS و JS

 <Link Rel = "STYLESHEET" Href = "Static/STYLESHEETS/BOOTSTRAP-SWITCH.CSS"/> <Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" src = "static/js/bootstrap-ditch.js"> </script>

2. HTML محتوى أضيفت

 <div data-on = "info" data-off = "success"> <input type = "checkbox" اكتب = "مربع الاختيار" محدد> </div>

1). يهدف DIV بالكامل إلى إضافة أنماط إلى مربع الاختيار.

2). المدخلات بسيطة للغاية ، إنها تسمية عادية.

3).-make-switch: أضف نمط CSS إلى مربع الاختيار باستخدام المكونات الإضافية.

4) .Data-on: نمط CSS عندما يكون على الحالة.

5) .DATA-OFF: نمط CSS عندما تكون الحالة خارج.

3. استخدام مربع الراديو:

 <label for = "Option11"> الخيار 1 </billy> <div> <input id = "orpion11" type = "radio" name = "radio2" value = "option11"> </viv> <label for = "option 1" 3 </label> <viv> <input id = "Option13" type = "Radio" name = "Radio2" value = "Option13"> </viv>

يتم استخدام مربع الراديو الراديو بنفس الطريقة ، لأنه يجب تغيير أحد مربع الراديو أولاً ، لذلك يجب إضافة رمز JS المقابل ؛

 <script> $ ('. radio2'). on ('switch change' ، function () {$ ('. radio2'). bootstrapswitch ('ToggladiostatealLowuncheck' ، true) ؛}) ؛ </script>

4. ابدأ

 $ ("div [class = 'switch']). كل (function () {$ this = $ (this) ؛ var onColor = $ this.attr (" onColor ") ؛ var OffColor = $ this.attr (" OffColor ") ؛ var ontext = $ this.attr (" ontextxt ") $ this.attr ("labeltext") ؛

1). احصل على جميع divs التبديل من خلال jQuery ، وبالتالي الحصول على ألوان Oncolor ، و Offnblor ، إلخ.

2). بعد ذلك مباشرة ، احصل على مدخلات العنصر الطفل الموجود في DIV.

3). قم بتحميل الإدخال من خلال طريقة bootstrapswitch.

وبهذه الطريقة ، يمكننا ببساطة تحقيق تأثير زر التبديل الذي نريده.

إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوع رائع لك: Bootstrap التعلم التعليمي

ما سبق حول كيفية استخدام التحكم في مفتاح Bootstrap (التبديل) ، وآمل أن يكون مفيدًا لتعلم الجميع.