Bootstrap-Knopf (Button) Widget
Knopf (Button) in Bootstrap - Taste im Kapitel eingeführt. Eine Schaltfläche (Button) Plug-in, können Sie einige interaktive, wie Steuertastenzustände oder erstellen Sie Gruppen von Tasten für andere Komponenten (Toolbars) hinzufügen.
Wenn Sie auf die einzelnen Plug-in - Funktionen beziehen möchten, müssen Siebutton.js zu verweisen.Oder, wie Bootstrap - Plugin Übersicht Kapitel erwähnt, können Sie aufbootstrap.jsoder komprimierte Version vonbootstrap.min.js beziehen.
Loading status
Hinzufügen zu dem Lastzustand der Taste, fügen Sie einfach auf die SchaltflächeElementdaten-Laden-text = "Loading ..." als seine Eigenschaften können, wie in den folgenden Beispielen gezeigt:
Beispiele
<Taste id = "Fett-btn" class = "BTN BTN-primary" Laden von Daten-text = "Loading ..."
type = "button"> Ladestatus </ button>
<Script> $ (function () {$ ( ". Btn"). Klicken Sie auf (function () {$ (this) .Taste ( 'Laden'). Delay (1000) .queue (function () {// $ ( this) .Taste ( 'reset') ;});});}); </ script>
Die Ergebnisse sind wie folgt:
Einfachschalter
Einzeltastenschalter (dh ändert sich der Normalzustand der Taste gedrückt Zustand und umgekehrt), fügen Sie einfachDaten-Toggle = "button" auf die Schaltfläche Element als seine Eigenschaften können zu aktivieren, wie in den folgenden Beispielen gezeigt:
Beispiele
<Taste type = "button" class = "BTN BTN-primary"
Daten-Toggle = "button"> einzelne Toggle </ button>
Die Ergebnisse sind wie folgt:
Ankreuzfeld (Checkbox)
Sie können ein Kontrollkästchen Gruppe zu erstellen, und durch Hinzufügen derDatenattributdaten-Knebel auf BTN-Gruppe= "Tasten" , um einen Schaltkasten Gruppe hinzufügen.
Beispiele
<Div class = "BTN-Gruppe" Daten-Toggle = "Tasten">
<Bezeichnung class = "BTN BTN-primary" >
<Input type = "checkbox"> Option 1 </ label>
<Bezeichnung class = "BTN BTN-primary" >
<Input type = "checkbox"> Option 2 </ label>
<Bezeichnung class = "BTN BTN-primary" >
<Input type = "checkbox"> Option 3 </ label>
</ Div>
Die Ergebnisse sind wie folgt:
Radiotaste (Radio)
Ebenso können Sie eine Radio - Gruppe zu erstellen, und durch Hinzufügen derDatenattributdaten-Toggle = "Tasten" BTN-Gruppehinzufügen den Radiobutton - Gruppe zu wechseln.
Beispiele
<Div class = "BTN-Gruppe" Daten-Toggle = "Tasten">
<Bezeichnung class = "BTN BTN-primary" >
<Input type = "radio" name = "Optionen" id = "option1"> Option 1 </ label>
<Bezeichnung class = "BTN BTN-primary" >
<Input type = "radio" name = "Optionen" id = "option2"> Option 2 </ label>
<Bezeichnung class = "BTN BTN-primary" >
<Input type = "radio" name = "Optionen" id = "option3"> Option 3 </ label>
</ Div>
Die Ergebnisse sind wie folgt:
Verwendung
Sie können Schaltfläche (Button) steckendurch JavaScript aktivieren, wie folgt:
$ ( '. Btn'). Taste ()
Optionen
Es gibt keine Optionen.
Weg
Im Folgenden sind einige der Tasten (Button) Plug-in nützliche Möglichkeiten:
| 方法 | 描述 | 实例 |
|---|
| button('toggle') | 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 |
$().button('toggle') |
| .button('loading') | 当加载时，按钮是禁用的，且文本变为 button 元素的data-loading-text属性的值。 |
$().button('loading') |
| .button('reset') | 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 |
$().button('reset') |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 |
$().button(string) |
Beispiele
Das folgende Beispiel demonstriert die Verwendung der obigen Verfahren:
Beispiele
<H2> Klicken Sie auf jeder Taste , um die Wirkung des Verfahrens </ h2> , um zu sehen
<H4> Demo .Taste ( "Toggle") Methode </ h4>
<Div id = "myButtons1" class = "bs-Beispiel">
<Taste type = "button" class = "BTN BTN-primary" > Original </ button>
</ Div>
<H4> Demo .Taste ( 'Laden') Methode </ h4>
<Div id = "myButtons2" class = "bs-Beispiel">
<Taste type = "button" class = "BTN BTN-primary"
Laden von Daten-text = "Loading ..."> Original </ button>
</ Div>
<H4> Demo .Taste ( "Reset") Methode </ h4>
<Div id = "myButtons3" class = "bs-Beispiel">
<Taste type = "button" class = "BTN BTN-primary"
Laden von Daten-text = "Loading ..."> Original </ button>
</ Div>
<H4> Demo .Taste (string) Methode </ h4>
<Taste type = "button" class = "BTN BTN-primary" id = "myButton4"
Daten-complete-text = "Laden beendet"> klicken I </ button>
<Script>
$ (Funktion () {$ ( "# MyButtons1 .btn" ) klicken (function () {$ (this) Taste ( "Toggle") ;.}) ;.}); $ (function () {$ ( "# MyButtons2 .btn" ). Klicken Sie auf (function () {$ (this). Button ( 'Laden'). Delay (1000). Queue (function () {
});});}) ; $ (Funktion () {$ ( "# MyButtons3 .btn" ). Klicken Sie auf (function () {$ (this). Button ( 'Laden'). Delay (1000). Queue (function () {$ (Diese) Taste ( " Reset") ;.});});}); $ (function () {$ ( "# MyButton4") . Klicken Sie auf (function () {$ (this). Button ( 'Laden'). Delay (1000). Queue (function () {$ (Diese) Taste (. 'Complete');});});});
</ Script>
Die Ergebnisse sind wie folgt:
