Pulsante Bootstrap (Button) widget di
Pulsante (Button) nel pulsante Bootstrap introdotto nel capitolo. Un pulsante (pulsante) plug-in, è possibile aggiungere alcuni stati del pulsante di controllo interattive, come ad esempio o creare gruppi di pulsanti per altri componenti (come ad esempio le barre degli strumenti).
Se si vuole fare riferimento alle singole funzioni di plug-in, è necessario fare riferimentobutton.js.O, come Bootstrap plug Panoramica capitolo citato, è possibile fare riferimento abootstrap.jso versione compressa delbootstrap.min.js.
stato di caricamento
Per aggiungere allo stato di carico del tasto, è sufficiente aggiungere l'elemento tastodi caricamento dati-text = "Loading ..." le sue proprietà può, come illustrato nei seguenti esempi:
Esempi
<Pulsante id = "grasso-btn" class = "btn btn-primario" dati-caricamento-text = "Loading ..."
type = "button"> Carica Stato </ button>
<Script> $ (function () {$ ( ". Btn"). Fare clic (function () {$ (this) apri un ( 'carico'). Delay (1000) .queue (function () {// $ ( questo) apri un ( 'reset') ;});});}); </ script>
I risultati sono i seguenti:
interruttore singolo
Per attivare interruttori singoli pulsanti (cioè, modificare lo stato normale del pulsante viene premuto stato e viceversa), basta aggiungeredati ginocchiera = "pulsante" dell'elemento tasto come sue proprietà può, come illustrato nei seguenti esempi:
Esempi
<Pulsante type = "button" class = "btn btn-primario"
Dati-Toggle = "tasto"> a singola ginocchiera </ button>
I risultati sono i seguenti:
Casella (Casella)
È possibile creare un gruppo casella di controllo, e aggiungendo i dati degli attributidei dati-levetta BTN-gruppo= "bottoni" per aggiungere un gruppo di scatola dell'interruttore.
Esempi
<div class = "btn-gruppo" dati-Toggle = "bottoni">
<Label class = "btn btn-primario" >
<Input type = "checkbox"> Opzione 1 </ label>
<Label class = "btn btn-primario" >
<Input type = "checkbox"> opzione 2 </ label>
<Label class = "btn btn-primario" >
<Input type = "checkbox"> opzione 3 </ label>
</ Div>
I risultati sono i seguenti:
Pulsante Radio (Radio)
Allo stesso modo, è possibile creare un gruppo di pulsanti, e con l'aggiunta degli attributi dei datidata-ginocchiera = "bottoni" per aggiungere BTN-gruppoper attivare il gruppo di pulsanti radio.
Esempi
<div class = "btn-gruppo" dati-Toggle = "bottoni">
<Label class = "btn btn-primario" >
<Input type = "radio" name = "opzioni" id = "opzione1"> Opzione 1 </ label>
<Label class = "btn btn-primario" >
<Input type = "radio" name = "opzioni" id = "OPZIONE2"> opzione 2 </ label>
<Label class = "btn btn-primario" >
<Input type = "radio" name = "opzioni" id = "Option3"> opzione 3 </ label>
</ Div>
I risultati sono i seguenti:
uso
È il pulsante (Button) può abilitare collegaretramite JavaScript, come segue:
$ ( '. Btn'). Button ()
Opzioni
Non ci sono opzioni.
modo
I seguenti sono alcuni dei pulsanti (pulsante) plug-in modi utili:
| 方法 | 描述 | 实例 |
|---|
| button('toggle') | 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 |
$().button('toggle') |
| .button('loading') | 当加载时，按钮是禁用的，且文本变为 button 元素的data-loading-text属性的值。 |
$().button('loading') |
| .button('reset') | 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 |
$().button('reset') |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 |
$().button(string) |
Esempi
Il seguente esempio illustra l'utilizzo dei metodi di cui sopra:
Esempi
<H2> Fare clic su ogni pulsante per vedere l'effetto del metodo </ h2>
<H4> Demo apri un ( 'Toggle') Metodo </ h4>
<div id = "myButtons1" class = "BS-esempio">
<Pulsante type = "button" class = "btn btn-primario" > originale </ button>
</ Div>
<H4> Demo apri un ( 'carico') Metodo </ h4>
<div id = "myButtons2" class = "BS-esempio">
<Pulsante type = "button" class = "btn btn-primario"
dati-caricamento-text = "Loading ..."> originale </ button>
</ Div>
<H4> Demo apri un ( 'reset') Metodo </ h4>
<div id = "myButtons3" class = "BS-esempio">
<Pulsante type = "button" class = "btn btn-primario"
dati-caricamento-text = "Loading ..."> originale </ button>
</ Div>
<H4> Demo apri un (string) metodo </ h4>
<Pulsante type = "button" class = "btn btn-primario" id = "myButton4"
dati-completo-text = "Caricamento finito"> cliccare I </ button>
<Script>
$ (Function () {$ ( "# MyButtons1 .btn" ) click (function () {$ (questo pulsante) ( 'Toggle') ;.}) ;.}); $ (function () {$ ( "# MyButtons2 .btn" ). Fare clic (function () {$ (this). Button ( 'carico'). Delay (1000). Queue (function () {
});});}) ; $ (Function () {$ ( "# MyButtons3 .btn" ). Fare clic (function () {$ (this). Button ( 'carico'). Delay (1000). Queue (function () {$ (Questo) tasto ( ' resettare') ;.});});}); $ (function () {$ ( "# MyButton4") . Fare clic (function () {$ (this). Button ( 'carico'). Delay (1000). Queue (function () {$ (Questo) tasto (. 'Completo');});});});
</ Script>
I risultati sono i seguenti:
