Плагин Bootstrap-Switch- это управление кнопкой переключения, реализованное для Bootstrap, которое может поддерживать настройку размеров, цвета и других атрибутов. Не так много кнопок типа коммутатора, используемых на домашних сайтах. Начальная загрузка очень популярна за границей. Я не знаю, не нравится ли нам это или это трудно и сложно использовать его для веб -сайтов. Тем не менее, эта кнопка открытия является наиболее широко используемой на мобильных устройствах, таких как мобильные телефоны, и характеристики экрана способствуют его развитию.
Описание функции:
Представляя простое использование двух форм Chekbox и Radio, существует больше эффектов и функций для просмотра демонстраций, нажмите кнопку, чтобы включить/выключить/выключить скольжение.
Инструкции для использования:
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"> </script> <script src = "static/js/bootstrap-switch.js"> </script>
2. HTML содержание добавлено
<div data-on="info" data-off="success"> <input type="checkbox" checked> </div> <div data-on="success" data-off="warning"> <input type="checkbox" checked> </div> <div data-on="warning" data-off="danger"> <input type="checkbox" checked> </div> <div data-on="default" data-off="primary"> <input type="checkbox" Проверено> </div>
1). Div полностью предназначен для добавления стилей в флажок.
2). Ввод очень прост, это обычная метка.
3) .make-Switch: добавить стиль CSS в флажок с помощью плагина.
4) .data-on: CSS-стиль, когда он находится в состоянии.
5) .data-off: стиль CSS, когда есть состояние.
3. Использование радио радиостанции:
<label for = "option11"> option 1 </label> <div> <input id = "option11" type = "radio" name = "radio2" value = "option 11" для = "опция13"> опция 3 </label> <div> <input id = "опция13" type = "radio" name = "radio2" value = "option13"> </div>
Радиол радиосвязь используется одинаково, потому что один из радиоактивных сначала должен быть изменен, поэтому необходимо добавить соответствующий код JS;
<script> $ ('. Radio2'). On ('switch-change', function () {$ ('. Radio2'). Bootstrapswitch ('toggleradiostateallowuncheck', true);}); </script>4. Начните
$ ("div [class = 'switch']"). Каждый (function () {$ this = $ (this); var oncolor = $ this.attr ("oncolor"); var offcolor = $ this.attr ("OffColor"); var ontext = $ this.attr ("ontext"); var offtext = $ this.attr ("offtext"); $ this.attr ("labeltext");1). Получите все переключатели через jQuery, получая тем самым их свойства Oncolor, OffColor и т. Д.
2). Сразу после этого получите вклад детского элемента, содержащегося в Div.
3). Загрузите вход с помощью метода BootstrapSwitch.
Таким образом, мы можем просто достичь эффекта кнопки переключения, который мы хотим.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам замечательную тему: учебник по обучению Bootstrap
Приведенное выше о том, как использовать управление Bootstrap Switch (Switch), я надеюсь, что это будет полезно для каждого обучения.