Bootstrap - Plugin de bouton

Les boutons ont été expliqués dans le chapitre Boutons Bootstrap . Avec ce plugin, vous pouvez ajouter des interactions telles que les états des boutons de contrôle ou créer des groupes de boutons pour plus de composants tels que des barres d'outils.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin du button.js. Sinon, comme mentionné dans le chapitre Présentation des plugins Bootstrap , vous pouvez inclure le fichier bootstrap.js ou le fichier bootstrap.min.js minifié .

État de chargement

Pour ajouter un état de chargement à un bouton, ajoutez simplement le data-loading-text = "Loading..." en tant qu'attribut de l'élément bouton comme indiqué dans l'exemple suivant -

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

Lorsque vous cliquez sur le bouton, la sortie serait comme le montre l'image suivante -

Bascule simple

Pour activer le basculement (c'est-à-dire changer l'état normal d'un bouton en état de poussée et vice versa) sur un seul bouton, ajoutez le data-toggle = "button" en tant qu'attribut de l'élément bouton comme indiqué dans l'exemple suivant -

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

Case à cocher

Vous pouvez créer un groupe de cases à cocher et y ajouter un basculement en ajoutant simplement l'attribut de données data-toggle = "buttons" à la 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

De même, vous pouvez créer un groupe d'entrées radio et y ajouter un basculement en ajoutant simplement l'attribut data data-toggle = "buttons" à la 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>

Usage

Vous pouvez activer le plugin des boutons via JavaScript comme indiqué ci-dessous -

$('.btn').button()

Options

Il n'y a pas d'options.

Méthodes

Voici quelques-unes des méthodes utiles pour le plugin de boutons -

Méthode	La description	Exemple
bouton ('toggle')	Active / désactive l'état de poussée. Donne au bouton l'apparence qu'il a été activé. Vous pouvez également activer le basculement automatique d'un bouton en utilisant ledata-toggle attribut.	`$().button('toggle')`
.button ('chargement')	Lors du chargement, le bouton est désactivé et le texte est remplacé par l'option de la data-loading-text attribut de l'élément bouton	`$().button('loading')`
.button ('réinitialiser')	Réinitialise l'état du bouton, ramenant le contenu d'origine au texte. Cette méthode est utile lorsque vous devez ramener le bouton à l'état principal	`$().button('reset')`
.button (chaîne)	La chaîne dans cette méthode fait référence à toute chaîne déclarée par l'utilisateur. Pour réinitialiser l'état du bouton et introduire un nouveau contenu, utilisez cette méthode.	`$().button(string)`

Exemple

L'exemple suivant illustre l'utilisation des méthodes ci-dessus -

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