Bootstrap - Plugin per pulsanti

I pulsanti sono stati spiegati nel capitolo Pulsanti Bootstrap . Con questo plugin puoi aggiungere alcune interazioni come gli stati dei pulsanti di controllo o creare gruppi di pulsanti per più componenti come le barre degli strumenti.

Se desideri includere questa funzionalità di plug-in individualmente, avrai bisogno del button.js. Altrimenti, come accennato nel capitolo Bootstrap Plugin Panoramica , è possibile includere le bootstrap.js oi minified i bootstrap.min.js .

Stato di caricamento

Per aggiungere uno stato di caricamento a un pulsante, è sufficiente aggiungere il file data-loading-text = "Loading..." come attributo dell'elemento button come mostrato nel seguente esempio:

<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 si fa clic sul pulsante, l'output sarà come mostrato nell'immagine seguente:

Interruttore singolo

Per attivare la commutazione (ovvero modificare lo stato normale di un pulsante in uno stato di pressione e viceversa) su un singolo pulsante, aggiungere il data-toggle = "button" come attributo dell'elemento button come mostrato nel seguente esempio:

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

Casella di controllo

È possibile creare un gruppo di caselle di controllo e aggiungere la commutazione semplicemente aggiungendo l'attributo dei dati data-toggle = "buttons" al 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>

Radio

Allo stesso modo è possibile creare un gruppo di ingressi radio e aggiungere la commutazione ad esso semplicemente aggiungendo l'attributo data data-toggle = "buttons" al 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>

Utilizzo

Puoi abilitare il plugin dei pulsanti via JavaScript come mostrato di seguito -

$('.btn').button()

Opzioni

Non ci sono opzioni.

Metodi

Di seguito sono riportati alcuni dei metodi utili per il plug-in dei pulsanti:

Metodo Descrizione Esempio

pulsante ("attiva / disattiva")

Attiva lo stato push. Dà al pulsante l'aspetto che è stato attivato. È inoltre possibile abilitare la commutazione automatica di un pulsante utilizzando ildata-toggle attributo.

 
$().button('toggle')

.button ('caricamento')

Durante il caricamento, il pulsante è disabilitato e il testo viene modificato nell'opzione dal file data-loading-text attributo dell'elemento pulsante

 
$().button('loading')

.button ('reset')

Ripristina lo stato del pulsante, riportando il contenuto originale nel testo. Questo metodo è utile quando è necessario riportare il pulsante allo stato principale

 
$().button('reset')

.button (stringa)

La stringa in questo metodo si riferisce a qualsiasi stringa dichiarata dall'utente. Per ripristinare lo stato del pulsante e introdurre nuovi contenuti, utilizzare questo metodo.

 
$().button(string)

Esempio

Il seguente esempio dimostra l'uso dei metodi precedenti:

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