Учебники

Bootstrap — плагин для кнопок

Октябрь 25, 2018

Кнопки были описаны в главе « Кнопки начальной загрузки» . С помощью этого плагина вы можете добавить некоторые взаимодействия, такие как состояния кнопок управления или создать группы кнопок для дополнительных компонентов, таких как панели инструментов.

Если вы хотите включить функциональность этого плагина индивидуально, то вам понадобится button.js . Иначе, как упомянуто в главе Обзор плагинов Bootstrap , вы можете включить bootstrap.js или минимизированный bootstrap.min.js .

Состояние загрузки

Чтобы добавить состояние загрузки для кнопки, просто добавьте data-loading-text = «Loading …» в качестве атрибута к элементу кнопки, как показано в следующем примере — 

<button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button"> 
   Loading state 
</button>

<script>
   $(function() { 
      $(".btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            // $(this).button('reset');
         });        
      });
   });  
</script>

Когда вы нажимаете на кнопку, результат будет таким, как показано на следующем рисунке —

Одиночный переключатель

Чтобы активировать переключение (т. Е. Изменить нормальное состояние кнопки на состояние нажатия и наоборот) для одной кнопки, добавьте data-toggle = «button» в качестве атрибута к элементу кнопки, как показано в следующем примере: 

<button type = "button" class = "btn btn-primary" data-toggle = "button">
   Single toggle
</button>

флажок

Вы можете создать группу флажков и добавить к ней переключение, просто добавив атрибут данных data-toggle = «buttons» в группу btn. 

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 3
   </label>
</div>

Радио

Точно так же вы можете создать группу радиовходов и добавить к ней переключение, просто добавив атрибут данных data-toggle = «buttons» в группу btn . 

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "radio" name =" options" id = "option1"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option2"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option3"> Option 3
   </label>
</div>

использование

Вы можете включить плагин кнопок через JavaScript, как показано ниже — 

$('.btn').button()

Опции

Там нет вариантов.

методы

Ниже приведены некоторые из полезных методов для плагина кнопок —

метод Описание пример
Кнопка ( «переключение») Переключает состояние нажатия. Придает кнопке вид, что она была активирована. Вы также можете включить автоматическое переключение кнопки, используя атрибут data-toggle . 
$().button('toggle')
.button ( ‘загрузка’) При загрузке кнопка отключается, и текст изменяется на параметр из атрибута data-loading-text элемента button 
$().button('loading')
.button ( ‘сброс’) Сбрасывает состояние кнопки, возвращая исходный контент к тексту. Этот метод полезен, когда вам нужно вернуть кнопку обратно в исходное состояние 
$().button('reset')
.button (строка) Строка в этом методе ссылается на любую строку, объявленную пользователем. Для сброса состояния кнопки и ввода нового контента используйте этот метод. 
$().button(string)

пример

Следующий пример демонстрирует использование вышеуказанных методов —

43
Share: