Button-Plug-in, das Bootstrap jeden Tag erlernen muss_Javascript-Fähigkeiten

Schaltflächen wurden im Kapitel „Bootstrap-Schaltflächen“ eingeführt. Mit dem Button-Plug-in können Sie einige Interaktionen hinzufügen, z. B. die Steuerung des Schaltflächenstatus, oder Schaltflächengruppen für andere Komponenten (z. B. Symbolleisten) erstellen.

Wenn Sie die Funktionalität dieses Plugins separat referenzieren möchten, müssen Sie auf button.js verweisen. Alternativ können Sie, wie im Kapitel Übersicht über das Bootstrap-Plugin erwähnt, auf bootstrap.js oder eine minimierte Version von bootstrap.min.js verweisen.

1. Ladestatus

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

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

2. Einzelschaltung

Um das Umschalten einer einzelnen Schaltfläche zu aktivieren (d. h. den normalen Zustand der Schaltfläche in den gedrückten Zustand oder umgekehrt zu ändern), fügen Sie einfach data-toggle="button" als Attribut zum Schaltflächenelement hinzu, wie im gezeigt Beispiel unten:

Code kopieren Der Code lautet wie folgt:

75f0f2e493f72393621fa5a1b8ec5889Einzelnes Umschalten65281c5ac262bf6d81768915a4a77ac0

Hinweis: Beim Laden mehrerer Seiten in Firefox bleiben Schaltflächen möglicherweise deaktiviert oder im Formular ausgewählt. Die Lösung ist: autocomplete="off" hinzufügen.

3. Optionsfeld

Ähnlich können Sie eine Optionsfeldgruppe erstellen und einen Schalter für die Optionsfeldgruppe hinzufügen, indem Sie das Datenattribut data-toggle="buttons" zur BTN-Gruppe hinzufügen.

<div class="btn-group" data-toggle="buttons">                
 <label for="" class="btn btn-primary active">               
  <input type="radio" name="sex" autocomplete="off" checked>男           
 </label>                         
 <label for="" class="btn btn-primary">                 
  <input type="radio" name="sex" autocomplete="off">女             
 </label>                         
</div>  

                                                            

4. Schaltfläche „Prüfen“

Sie können eine Kontrollkästchengruppe erstellen und einen Schalter für die Kontrollkästchengruppe hinzufügen, indem Sie das Datenattribut data-toggle="buttons" zu btn-group hinzufügen.

<div class="btn-group" data-toggle="buttons">
 <label for="" class="btn btn-primary active">
  <input type="checkbox" name="fa" autocomplete="off" checked>
  音乐 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  体育 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  美术 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  电脑 </label>
</div>

Die Schaltflächenmethode im Schaltflächen-Plug-In verfügt über drei Parameter: Umschalten, Zurücksetzen, Zeichenfolge (z. B. Laden, Abschließen).

//可代替 data-toggle="button"

$('button').on('click', function() {
 $(this).button('toggle');
})
 

Hier sind einige nützliche Methoden in Button-Plugins:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere Informationen zu Bootstrap finden Sie im speziellen Thema:

Bootstrap-Lern-Tutorial