Bootstrap - Plug-in de botão

Os botões foram explicados no capítulo Botões de bootstrap . Com este plugin, você pode adicionar alguma interação, como estados do botão de controle ou criar grupos de botões para mais componentes, como barras de ferramentas.

Se você deseja incluir esta funcionalidade de plug-in individualmente, você precisará do button.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir o bootstrap.js ou o bootstrap.min.js minimizado .

Carregando estado

Para adicionar um estado de carregamento a um botão, basta adicionar o data-loading-text = "Loading..." como um atributo para o elemento de botão, conforme mostrado no exemplo a seguir -

<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>

Quando você clica no botão, o resultado seria como visto na imagem a seguir -

Alternância única

Para ativar a alternância (ou seja, alterar o estado normal de um botão para um estado pressionado e vice-versa) em um único botão, adicione o data-toggle = "button" como um atributo para o elemento de botão, conforme mostrado no exemplo a seguir -

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

Caixa de seleção

Você pode criar um grupo de caixas de seleção e adicionar alternância a ele simplesmente adicionando o atributo de dados data-toggle = "buttons" ao btn-group.

<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>

Rádio

Da mesma forma, você pode criar um grupo de entradas de rádio e adicionar alternância a ele simplesmente adicionando o atributo de dados data-toggle = "buttons" ao btn-group.

<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>

Uso

Você pode habilitar o plugin de botões via JavaScript como mostrado abaixo -

$('.btn').button()

Opções

Não há opções.

Métodos

Abaixo estão alguns dos métodos úteis para o plugin de botões -

Método Descrição Exemplo

botão ('alternar')

Alterna o estado push. Dá ao botão a aparência de que foi ativado. Você também pode ativar a alternância automática de um botão usando odata-toggle atributo.

 
$().button('toggle')

.button ('carregando')

Ao carregar, o botão é desativado e o texto é alterado para a opção do data-loading-text atributo do elemento do botão

 
$().button('loading')

.button ('reset')

Redefine o estado do botão, trazendo o conteúdo original de volta ao texto. Este método é útil quando você precisa retornar o botão de volta ao estado principal

 
$().button('reset')

.button (string)

String neste método se refere a qualquer string declarada pelo usuário. Para redefinir o estado do botão e trazer um novo conteúdo, use este método.

 
$().button(string)

Exemplo

O exemplo a seguir demonstra o uso dos métodos acima -

<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>