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

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

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

Чтобы добавить состояние загрузки к кнопке, просто добавьте в файл data-load-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()

Методы

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

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

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

<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>
 
<div id = "myButtons1" class = "bs-example">
   <button type = "button" class = "btn btn-primary">Primary</button>
</div>
 
<h4>Example to demonstrate  .button('loading') method</h4>
 
<div id = "myButtons2" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>
 
<h4>Example to demonstrate .button('reset') method</h4>
 
<div id = "myButtons3" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>
 
<h4>Example to demonstrate  .button(string) method</h4>
 
<button type = "button" class = "btn btn-primary" id = "myButton4"
   data-complete-text = "Loading finished">
   Click Me
</button>
 
<script type = "text/javascript">
   $(function () {
      $("#myButtons1 .btn").click(function(){
         $(this).button('toggle');
      });
   });
  
   $(function() {
      $("#myButtons2 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
         });       
      });
   });  
  
   $(function() {
      $("#myButtons3 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
         });       
      });
   }); 
  
   $(function() {
      $("#myButton4").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
         });       
      });
   });
</script>



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok