Bootstrap Schaltflächen-Plugin (Button)

Schaltflächen (Button) wurden im KapitelBootstrap-Schaltflächenvorgestellt. Über das Schaltflächen-Plugin können Sie Interaktionen hinzufügen, wie z. B. das Steuern von Schaltflächenzuständen oder das Erstellen von Schaltflächengruppen für andere Komponenten (wie Symbolleisten).

Ladezustand

Um einer Schaltfläche einen Ladezustand hinzuzufügen, fügen Sie dem Schaltflächenelement einfachdata-loading-text="Loading..."als Attribut hinzu, wie im folgenden Beispiel gezeigt:

Beispiel

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

Ausprobieren »

Das Ergebnis ist wie folgt:

按钮（Button）插件加载状态

Einfaches Umschalten

Um ein einfaches Umschalten der Schaltfläche zu aktivieren (d. h. den Normalzustand der Schaltfläche in den gedrückten Zustand zu ändern und umgekehrt), fügen Sie dem Schaltflächenelement einfachdata-toggle="button"als Attribut hinzu, wie im folgenden Beispiel gezeigt:

Beispiel

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

Ausprobieren »

Das Ergebnis ist wie folgt:

按钮（Button）插件单个切换

Kontrollkästchen

Sie können eine Kontrollkästchengruppe erstellen und durch Hinzufügen vonbtn-groupdas Datenattributdata-toggle="buttons"hinzufügen, um das Umschalten für die Kontrollkästchengruppe zu aktivieren.

Beispiel

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

Ausprobieren »

Das Ergebnis ist wie folgt:

按钮（Button）插件复选框

Optionsschaltflächen

Ähnlich können Sie eine Optionsschaltflächengruppe erstellen und durch Hinzufügen vonbtn-groupdas Datenattributdata-toggle="buttons"hinzufügen, um das Umschalten für die Optionsschaltflächengruppe zu aktivieren.

Beispiel

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

Ausprobieren »

Das Ergebnis ist wie folgt:

按钮（Button）插件单选按钮

Nutzung

Sie könnenüber JavaScriptdas Schaltflächen-Plugin aktivieren, wie unten gezeigt:

$('.btn').button()

Optionen

Es gibt keine Optionen.

Methoden

Hier sind einige nützliche Methoden im Schaltflächen-Plugin:

MethodeBeschreibungBeispiel
button('toggle')Schaltet den gedrückten Zustand um. Verleiht der Schaltfläche ein aktiviertes Aussehen. Sie können das Attributdata-toggleverwenden, um das automatische Umschalten der Schaltfläche zu aktivieren. 
$().button('toggle')
.button('loading')Beim Laden ist die Schaltfläche deaktiviert und der Text ändert sich zum Attributwertdata-loading-textdes Schaltflächenelements. 
$().button('loading')
.button('reset')Setzt den Schaltflächenzustand zurück und der Textinhalt wird auf den ursprünglichen Inhalt wiederhergestellt. Diese Methode ist sehr nützlich, wenn Sie die Schaltfläche in ihren ursprünglichen Zustand zurückversetzen möchten. 
$().button('reset')
.button(string)Die Zeichenfolge in dieser Methode bezieht sich auf eine beliebige vom Benutzer deklarierte Zeichenfolge. Verwenden Sie diese Methode, um den Schaltflächenzustand zurückzusetzen und neuen Inhalt hinzuzufügen. 
$().button(string)

Beispiel

Das folgende Beispiel demonstriert die Verwendung der oben genannten Methoden:

Beispiel

<h2>Klicken Sie auf jede Schaltfläche, um die Methodeneffekte zu sehen</h2> <h4>Demo .button('toggle') method</h4> <div id="myButtons1" class="bs-example"> <button type="button" class="btn btn-primary">Original</button> </div> <h4>Demo .button('loading') method</h4> <div id="myButtons2" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Loading...">Original</button> </div> <h4>Demo .button('reset') method</h4> <div id="myButtons3" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Loading...">Original</button> </div> <h4>Demo .button(string) method</h4> <button type="button" class="btn btn-primary" id="myButton4" data-complete-text="Loading finished">Please click me</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>

Ausprobieren »

Das Ergebnis ist wie folgt:

按钮（Button）插件方法
Weitere Erweiterungen