Button-Plug-in, das Bootstrap jeden Tag erlernen muss_Javascript-Fähigkeiten-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:04:09

Original

1681 Leute haben es durchsucht

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>

Nach dem Login kopieren

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:

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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');
})

Nach dem Login kopieren

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