Dinamizzare i pulsanti di Bootstrap con Javascript: Loading e Toggle

Fino ad ora abbiamo disegnato dei pulsanti che non fanno nulla, ovviamente si è trattato solo di esempi scolastici in quanto, per definzione, un pulsante fa sempre qualcosa essendo il "grilletto" natuale di numerose azioni. Ora, quindi, proveremo a trasformare i nostri bellissimi pulsanti in qualcosa di funzionale.

Loading

Cominciamo con un pulsante che si trova in uno stato che indica il caricamento di un qualche elemento.

<button type="button" id="mioPulsante"
  data-loading-text="Attendere..." class="btn btn-primary">
  Mi sono caricato
</button>

L’attibuto data-loading-text permette di specificare il testo da mostrare nella fase di "caricamento". Per attivare questo stato, occore il codice jQuery che segue:

$('#mioPulsante').button('loading');

Mentre per disabilitarlo, occorre il codice che segue:

$('#mioPulsante').button('reset');

Per provare il comportamento di un pulsante come quello che abbiamo creato con il primo codice proposto, potete aggiungere alla pagina che lo ospita il codice che segue il quale disattiva lo stato di caricamento del pulsante dopo tre secondi dal completamento del caricamento della pagina:

<script>
  $(function() {
    var $btn = $('#mioPulsante');
    $btn.button('loading');
    setTimeout(function() {
      $btn.button('reset');
    }, 3000);
  });
</script>

Toggle

È possibile fare in modo che un pulsante si comporti in modo "toggle" ossia che al primo clic risulti attivato, al secondo disattivato, al terzo di nuovo attivato e così via. Lo si può fare semplicemente assegnando ad un pulsante l’attributo data-toggle="button" come nell’esempio qui sotto:

<button type="button" id="mioPulsante"
  data-toggle="button" class="btn btn-primary">
  Esempio di Toggle
</button>

È importante precisare che, siccome lo stato attivo è esteticamente uguale allo stato over di un pulsante, dopo il secondo clic può sembrare che il pulsante rimanga attivo, ma basta spostarsi fuori dal pulsante per rendersi conto che così non è.

Questo comportamento "toggle" può essere assegnato ad un pulsante anche via codice, come segue:

$('#mioPulsante').button('toggle');

Si può attivare il comportamento "toggle" anche per altri elementi come gruppi di pulsanti costituiti da checkbox o radiobutton. Il gruppo deve avere l’attributo data-toggle="buttons". Checkbox e radiobutton devono essere inseriti in un tag label a cui è assegnata una classe che definisce l’aspetto dei pulsanti e di cui già abbiamo parlato. Inseriti un gruppo di questo tipo, checkbox o radiobutton non mostrano più la casellina o il pallino per la loro selezione: per attivarli, basterà fare clic su di essi.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-success">
    <input type="radio" name="options" id="Uno"> Uno
  </label>
  <label class="btn btn-success">
    <input type="radio" name="options" id="Due"> Due
  </label>
  <label class="btn btn-success">
    <input type="radio" name="options" id="Tre"> Tre
  </label>
</div>