In diesem Artikel wird die Verwendung des Dropdown -Moduls Bootstrap -Dropdown für Ihre Referenz vorgestellt. Der spezifische Inhalt ist wie folgt
1. Quellcodeanalyse:
Dropdowns.scss: Dropdown -Box -Modul
JavaScripts/Bootstrap/Dropdown.js: Implementierung der Dropdown-Box-Antwort
2. Funktionen und Prinzipien:
Wenn Sie die Registerkarte abrufen, kann die Funktion des Anzeigens ausgewählter Elemente nicht standardmäßig realisiert werden.
Prinzip:
1. Verwenden Sie die Dropdown-Klasse als Ankerpunkt und lassen Sie die Dropdown-Menu von Child List absolut positionieren. Sie müssen auch einen Klickpunkt als Einstellungsdaten-Toggle = "Dropdown" hinzufügen, um den Assoziation zu erstellen.
2. Benötigen Sie Unterstützung vom JS-Plug-In
3. Quellcodeanalyse:
1. CARET: Implementieren Sie Dreieck im Abwärtsdreieck mit den Grenzen zur Implementierung
1.1. Die Randfarbe ist standardmäßig die Schriftfarbe
1.2. Implementierung von Dreiecken: Die Grenze muss eine Breite haben, und dann müssen die angrenzenden Seiten eine Breite haben, aber die Farbe ist transparent. Schließlich muss das Element ein Blockelement in der Zeile sein, um seine Höhe und Breite 0 zu machen.
1.3. Der Code ist wie folgt
Die Codekopie lautet wie folgt: <span style = "Border-Links: 4px Solid; Border-Top: 4PX Solid Transparent; Border-Bottom: 4px Solid Transparent; Höhe: 0px; Breite: 0px; Zeilenhöhe: Normal; Anzeige: Inline-Block;"> </span>
2. Der Hörtyp des Klickereignisses ist an das Dokument gebunden, und der Hörtyp ist data-toggle = "Dropdown".
3. Die vom JS -Plugin und des Klassenkonstruktors geschriebene Plugin -Funktion wird zum Aufrufen des Plugins mit der JS -Methode verwendet.
4. Der Datenmodus ruft das Plug-In auf, mit dem Ereignisse in das Dokument eingeführt werden. Der Code lautet wie folgt:
$ (dokument) .on ('click.bs.dropdown.data-api', clearMenus) .on ('click.bs.dropdown.data-api', '.dropdown-Formular', Funktion (e) {e.StopPropagation ()}). Dropdown.prototype.toggle) .on ('keydown.bs.dropdown.data-api', Toggle, Dropdown.Prototype.Key) .on ('keydown.bs.dropdown.data-api', '.Der Code ruft direkt die durch Dropdown definierte Methode auf. Das wunderbare Design hier liegt im Plug-in-Framework, im Anruf des Datenmodus und im Anruf des JS-Plug-in-Modus, während diese beiden Aufrufmodi denselben Code verwenden.
5. Wenn Sie es beim JS-Plug-In anrufen, müssen Sie die grundlegenden Methoden selbst aufrufen. Nur das Toggle -Ereignis wird beim Erstellen einer Instanz gebunden.
var Dropdown = Funktion (Element) {$ (Element) .on ('klick.bs.dropdown', this.toggle)}6. ClearMenu: Nur das Element von Data-Toggle = "Dropdown" wird gelöscht
7. Dropdown-Backdrop: Wird verwendet, um die Verarbeitung von Klick-Ereignissen zu verschieben
8. Tastedown: Wenn die Dropdown -Taste den Fokus erhält, drücken Sie die Taste, um zu erweitern, und drücken Sie die obere Taste, um zu schrumpfen.
9. Data-Target und Herf = "#id": Um Klicken zu erreichen, erweitern Sie die angegebene Dropdown-Liste. Die Standardeinstellung besteht darin, die Geschwisterknoten hinter der Taste zu erweitern:
<ul> <li><a>Index</a></li> <li><a>Zhenglu</a></li> <li > <a data-toggle="dropdown" href="#name" >User tools</a></li></ul><div id="name" > <ul > <li><a>About us</a></li> </ul></div>
10. Implementieren Sie das Pop-up-Untermenü und verwenden
11. Anwendungsbeispiele
<div id = "Dropdown"> <a id = "Dropdown-Btn" data-target = "#Dropdown"> Nummer </a> <ul> <li> <a> 3343 </a> </li> <li> <a> 555 </a> </li> </ul> </div> </div>
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.