Bootstrap Plugin Button (Bouton)

Button (Bouton) dansBoutons Bootstrapa été introduit dans le chapitre. Grâce au plugin Button (Bouton), vous pouvez ajouter des interactions telles que le contrôle des états des boutons, ou la création de groupes de boutons pour d'autres composants (comme les barres d'outils).

État de chargement

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

Exemple

<button id="fat-btn" class="btn btn-primary" data-loading-text="Chargement..." type="button">État de chargement</button> <script> $(function() { $(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() { // $(this).button('reset'); // $(this).dequeue(); }); }); }); </script>

Essayez-le »

Le résultat est le suivant :

按钮（Button）插件加载状态

Bascule unique

Pour activer une bascule à bouton unique (c'est-à-dire changer l'état normal du bouton en état enfoncé, et inversement), ajoutez simplement à l'élément buttondata-toggle="button"comme attribut, comme montré dans l'exemple ci-dessous :

Exemple

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

Essayez-le »

Le résultat est le suivant :

按钮（Button）插件单个切换

Case à cocher

Vous pouvez créer un groupe de cases à cocher, et en ajoutant àbtn-groupajoutez l'attribut datadata-toggle="buttons"pour activer la bascule pour le groupe de cases à cocher.

Exemple

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

Essayez-le »

Le résultat est le suivant :

按钮（Button）插件复选框

Boutons radio

De même, vous pouvez créer un groupe de boutons radio et, en ajoutant àbtn-group, ajouter l'attribut datadata-toggle="buttons"pour activer la bascule du groupe de boutons radio.

Exemple

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

Essayez-le »

Le résultat est le suivant :

按钮（Button）插件单选按钮

Utilisation

Vous pouvezvia JavaScriptactiver le plugin Button (Button), comme indiqué ci-dessous :

$('.btn').button()

Options

Il n'y a aucune option.

Méthodes

Voici quelques méthodes utiles dans le plugin Button (Button) :

MéthodeDescriptionExemple
button('toggle')Bascule l'état enfoncé. Donne au bouton une apparence activée. Vous pouvez utiliser l'attributdata-togglepour activer le basculement automatique du bouton. 
$().button('toggle')
.button('loading')Lors du chargement, le bouton est désactivé, et le texte est remplacé par la valeur de l'attributdata-loading-textde l'élément button. 
$().button('loading')
.button('reset')Réinitialise l'état du bouton, et le contenu textuel revient au contenu d'origine. Cette méthode est très utile lorsque vous voulez remettre le bouton dans son état d'origine. 
$().button('reset')
.button(string)La chaîne de caractères dans cette méthode fait référence à toute chaîne déclarée par l'utilisateur. En utilisant cette méthode, réinitialisez l'état du bouton et ajoutez un nouveau contenu. 
$().button(string)

Exemple

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

Exemple

<h2>Cliquez sur chaque bouton pour voir les effets des méthodes</h2> <h4>Démo de la méthode .button('toggle')</h4> <div id="myButtons1" class="bs-example"> <button type="button" class="btn btn-primary">Original</button> </div> <h4>Démo .button('loading') méthode</h4> <div id="myButtons2" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Chargement...">Original</button> </div> <h4>Démo .button('reset') méthode</h4> <div id="myButtons3" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Chargement...">Original</button> </div> <h4>Démo .button(string) méthode</h4> <button type="button" class="btn btn-primary" id="myButton4" data-complete-text="Chargement terminé">Veuillez cliquer sur moi</button> <script>
$(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>

Essayez-le »

Le résultat est le suivant :

按钮（Button）插件方法
Autres extensions