Plug-in de bouton que Bootstrap doit apprendre tous les jours_compétences javascript

Les boutons ont été introduits dans le chapitre Boutons Bootstrap. Avec le plug-in Button, vous pouvez ajouter certaines interactions, telles que le contrôle de l'état des boutons, ou créer des groupes de boutons pour d'autres composants (tels que les barres d'outils).

Si vous souhaitez référencer les fonctionnalités de ce plugin séparément, vous devez alors référencer bouton.js. Alternativement, comme mentionné dans le chapitre Présentation du plugin Bootstrap, vous pouvez référencer bootstrap.js ou une version minifiée de bootstrap.min.js.

1. Statut de chargement

Pour ajouter l'état de chargement à un bouton, ajoutez simplement data-loading-text="Loading..." à l'élément bouton comme attribut, comme indiqué dans l'exemple ci-dessous :

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
 type="button"> 加载状态
</button>
<script>
 $(function() {
  $(".btn").click(function(){
   $(this).button('loading').delay(1000).queue(function() {
   // $(this).button('reset');
   });  
  });
 }); 
</script>

2. Commutation unique

Pour activer la bascule d'un seul bouton (c'est-à-dire changer l'état normal du bouton à l'état enfoncé ou vice versa), ajoutez simplement data-toggle="button" comme attribut à l'élément bouton, comme indiqué dans le exemple ci-dessous :

Copier le code Le code est le suivant :

Bascule unique

Remarque : lors du chargement de plusieurs pages dans Firefox, les boutons peuvent rester désactivés ou sélectionnés dans le formulaire. La solution est la suivante : ajoutez autocomplete="off".

3. Bouton radio

De même, vous pouvez créer un groupe de boutons radio et ajouter une bascule pour le groupe de boutons radio en ajoutant l'attribut de données data-toggle="buttons" au groupe btn.

<div class="btn-group" data-toggle="buttons">                
 <label for="" class="btn btn-primary active">               
  <input type="radio" name="sex" autocomplete="off" checked>男           
 </label>                         
 <label for="" class="btn btn-primary">                 
  <input type="radio" name="sex" autocomplete="off">女             
 </label>                         
</div>  

                                                             

4. Bouton de vérification

Vous pouvez créer un groupe de cases à cocher et ajouter une bascule pour le groupe de cases à cocher en ajoutant l'attribut de données data-toggle="buttons" à btn-group.

<div class="btn-group" data-toggle="buttons">
 <label for="" class="btn btn-primary active">
  <input type="checkbox" name="fa" autocomplete="off" checked>
  音乐 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  体育 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  美术 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  电脑 </label>
</div>

La méthode bouton dans le plug-in Button a trois paramètres : bascule, réinitialisation, chaîne (comme le chargement, la fin).

//可代替 data-toggle="button"

$('button').on('click', function() {
 $(this).button('toggle');
})
 

Voici quelques méthodes utiles dans les plugins Button :

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus d'informations sur Bootstrap, vous pouvez vous référer au sujet spécial :

Tutoriel d'apprentissage de Bootstrap.