In diesem Beispiel wird die Anwendung der Registerkarte implementiert. Dieses Plug-In ist relativ einfach. Der spezifische Inhalt ist wie folgt
Quellcode -Datei:
tab.js
Implementierungsprinzip:
1. Wenn Sie auf ein Element klicken, müssen Sie zunächst das ursprünglich hervorgehobene Element abbrechen.
2. Markieren Sie dann das geklickte Element
3. Wenn das Klicken auf ein Element im Dropdown-Feld eine Option ist, wählen Sie sich selbst und wählen Sie auch das Dropdown-Feld.
5. Wenn die Animation definiert ist, führen Sie zuerst die Animation aus und dann Rückruf
Quellcodeanalyse:
1. Die Show -Methode wird ausgelöst, wenn ein Element geklickt wird, wodurch die folgenden vier Ereignisse ausgelöst werden.
1.1. HIDEN.BS.TAB: Verstecken Sie das vorherige Element
1.2. Show.bs.tab: Zeigen Sie das aktuelle Element an
1.3. Hideen.bs.tab: Fertig, indem das vorherige Element versteckt ist
1.4. Gezeigt.bs.tab: Zeigen Sie das aktuelle Element vollständig an
1.5. HIDEN/SHOW Event Quellcode:
var $ vorher = $ ul.find ('. Active: Last a') var hideEvent = $ .event ('hide.bs.tab', {relatedTarget: $ this [0]}) var showEvent = $ .event ('show.bs.tab', {relatedTarget: $ vorher [0]})2. Aktiv: Aktivieren Sie das aktuelle Objekt
2.1. Fügen Sie dem Navigationselement das Attribut für das Aria-expandierte Attribut hinzu, um zu markieren, ob sich dieses Element im erweiterten Zustand befindet
2.2. Verwenden Sie den Reflow -Mechanismus mit dem Offsetwidth -Attribut, um teilweise Neulackierung zu erreichen
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Diese Reihe von Tutorials wurde zusammengestellt in: Bootstrap Basic Tutorials Special Thema, Willkommen, um zu lernen.
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.