Bouton Bootstrap (Button) un widget
Bouton (Button) dans le bouton Bootstrap introduit dans le chapitre. Un bouton (Button) plug-in, vous pouvez ajouter quelques témoins états des boutons interactifs, tels que ou de créer des groupes de boutons pour les autres composants (tels que les barres d'outils).
Si vous voulez faire référence à des caractéristiques individuelles de plug-in, vous devez référencerbutton.js.Ou, comme Bootstrap plug - in Présentation du chapitre mentionné, vous pouvez vous référer àbootstrap.jsou version compressée debootstrap.min.js.
Statut de chargement
Pour ajouter à l'état de la touche de chargement, il suffit d' ajouter l'élément de boutonde chargement de données-text = "Chargement..." que ses propriétés peuvent, comme le montrent les exemples suivants:
Exemples
<Bouton id = "fat-btn" class = "btn btn-primaire" de chargement de données-text = "Chargement en cours ..."
type = "button"> Load Status </ button>
<Script> $ (function () {$ ( ". Btn"). Cliquez sur (function () {$ (this) .button ( 'loading'). Delay (1000) .queue (function () {// $ ( ce) .button ( 'reset') ;});});}); </ script>
Les résultats sont les suivants:
interrupteur simple
Pour activer les commutateurs de boutons simples (ie, changer l'état normal du bouton est pressé Etat et vice - versa), il suffit d' ajouter desdonnées-toggle = "button" l'élément de bouton comme ses propriétés peuvent, comme le montrent les exemples suivants:
Exemples
<Bouton type = "button" class = "btn btn-primaire"
données-toggle = "button"> à bascule </ button>
Les résultats sont les suivants:
Checkbox (Checkbox)
Vous pouvez créer un groupe de cases à cocher, et en ajoutant les données d' attributs dedonnées à bascule btn-groupe= "boutons" pour ajouter un groupe de boîte de commutation.
Exemples
<Div class = "btn-groupe" données-toggle = "boutons">
<Étiquette class = "btn btn-primaire" >
<entrée type = "checkbox"> Option 1 </ label>
<Étiquette class = "btn btn-primaire" >
<entrée type = "checkbox"> l' option 2 </ label>
<Étiquette class = "btn btn-primaire" >
<entrée type = "checkbox"> Option 3 </ label>
</ Div>
Les résultats sont les suivants:
bouton radio (Radio)
De même, vous pouvez créer un groupe de radio, et en ajoutant les données d' attributs dedonnées toggle = "boutons" pour ajouter btn-groupepour faire basculer le groupe de boutons radio.
Exemples
<Div class = "btn-groupe" données-toggle = "boutons">
<Étiquette class = "btn btn-primaire" >
<entrée type = "radio" name = "options" id = "option1"> Option 1 </ label>
<Étiquette class = "btn btn-primaire" >
<entrée type = "radio" name = "options" id = "option2"> l' option 2 </ label>
<Étiquette class = "btn btn-primaire" >
<entrée type = "radio" name = "options" id = "option3"> Option 3 </ label>
</ Div>
Les résultats sont les suivants:
usage
bouton (Button) Vous pouvez activer branchervia JavaScript, comme suit:
$ ( '. Btn'). Bouton ()
options de
Il n'yapasd'options.
manière
Voici quelques-uns des boutons (bouton) plug-in des moyens utiles:
| 方法 | 描述 | 实例 |
|---|
| button('toggle') | 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 |
$().button('toggle') |
| .button('loading') | 当加载时，按钮是禁用的，且文本变为 button 元素的data-loading-text属性的值。 |
$().button('loading') |
| .button('reset') | 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 |
$().button('reset') |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 |
$().button(string) |
Exemples
L'exemple suivant illustre l'utilisation des procédés ci-dessus:
Exemples
<H2> Cliquez sur chaque bouton pour voir l'effet de la méthode </ h2>
<H4> Demo .button ( 'toggle') Méthode </ h4>
<Div id = "myButtons1" class = "bs-exemple">
<Bouton type = "button" class = "btn-primaire btn" > originale </ button>
</ Div>
<H4> Demo .button ( 'loading') méthode </ h4>
<Div id = "myButtons2" class = "bs-exemple">
<Bouton type = "button" class = "btn btn-primaire"
de chargement de données-text = "Chargement ..."> originale </ button>
</ Div>
<H4> Demo .button ( 'reset') méthode </ h4>
<Div id = "myButtons3" class = "bs-exemple">
<Bouton type = "button" class = "btn btn-primaire"
de chargement de données-text = "Chargement ..."> originale </ button>
</ Div>
<H4> Demo .button (string) Méthode </ h4>
<Bouton type = "button" class = "btn btn-primaire" id = "myButton4"
données-complete-text = "Chargement terminé"> cliquez sur I </ button>
<Script>
$ (Fonction () {$ ( "# MyButtons1 .btn" ) click (function () {$ (ce bouton) ( 'toggle') ;.}) ;.}); $ (function () {$ ( "MyButtons2 .btn de #" ). Cliquez sur (function () {$ (this. Button) ( 'loading'). Delay (1000). Queue (function () {
});});}) ; $ (Function () {$ ( "MyButtons3 .btn de #" ). Cliquez sur (function () {$ (this. Button) ( 'loading'). Delay (1000). Queue (function () {$ (Ce) touche ( « reset») ;.});});}); $ (function () {$ ( "# MyButton4") . Cliquez sur (function () {$ (this). Button ( 'loading'). Delay (1000). Queue (function () {$ (Ce) touche (. 'Complète');});});});
</ Script>
Les résultats sont les suivants:
