Latest web development tutorials

Bootstrap-Plugin Übersicht

Im vorangegangenen Abschnitt diskutiertdie Anordnung der Komponenten an der Baugruppe es gerade der Anfang.Bootstrap kommt mit 12 Arten jQuery-Plugin kann die Funktionalität auf der Website interaktiver hinzugefügt werden erweitert. Auch wenn Sie nicht eine erweiterte JavaScript-Entwickler sind, können Sie auch die Bootstrap JavaScript-Plug-Ins lernen beginnen. Verwenden Sie Bootstrap-Daten-API (Bootstrap-Daten-API), können die meisten von dem Plug-in ausgelöst werden, ohne Code schreiben.

Site-Referenzen Bootstrap Stecker auf zwei Arten:

  • Allein Quote: eine separate* .jsDateien von Bootstrap verwenden.Einige Plug-Ins und CSS-Komponente hängt von anderen Plug-Ins. Wenn Sie eine separate Referenz stecken, stellen Sie sicher, dass sie die Abhängigkeiten zwischen Plug-Ins zu verstehen.
  • Kompilieren (gleichzeitig) Zitat: Verwenden Siebootstrap.jsoder komprimierte Version vonbootstrap.min.js.
    Versuchen Sie nicht , diese beiden Dateien zu zitieren, und weil bootstrap.jsbootstrap.min.js alle Plugins enthalten.
Alle Plug-Ins basieren auf jQuery. Sie müssen in der Plugin-Datei vor jQuery referenziert werden. BesuchenSiebower.json Bootstrap derzeit unterstützte Version von jQuery anzuzeigen.

Eigenschaftsdaten

  • Sie können nur in der Lage sein, alle Daten zu verwenden Bootstrap-Plugin-API-Attribut, ohne eine einzige Zeile JavaScript-Code zu schreiben. Dies ist ein erster Klasse Bootstrap-API, sollte es Ihre bevorzugte Weg sein.
  • Dann wieder, in einigen Fällen können Sie benötigen diese Funktion zu deaktivieren. Deshalb bieten wir auch eine geschlossene Datenattribut API - Methode, nämlich die Daten-api- Namensraum zu heben und zu binden die Dokumentereignisse. Wie die folgenden: 
    $ (Dokument) .off ( '. Daten-api)
  • Um einen bestimmten Plug-in zu schließen, kurz vor dem Daten-api-Namespace sowie den Namen des Widgets als Namespace, wie hier gezeigt: 
    $ (Dokument) .off ( '. Alert.data-api)

Programmatische API

Wir bieten eine Möglichkeit, reine JavaScript-API für alle Bootstrap-Plugins. Alle öffentlichen API-Aufrufe werden einzeln oder verkettete Modus unterstützt, und gibt eine Reihe von Elementen operiert (Hinweis: das Formular aus und rufen Sie jQuery Vereinbarung). Zum Beispiel: 

$ ( ". Btn.danger"). Button ( "Toggle"). AddClass ( "Fett")

Alle Methoden können eine optionale Optionen nehmen Objekt als Parameter oder eine Zeichenfolge, die eine bestimmte Methode oder ohne Parameter (in diesem Fall wird es das Plug-in für das Standardverhalten initialisieren), wie folgt: 

// Initialized auf das Standardverhalten von $ ( "# myModal"). Modal ()    
 // Tastatur initialisieren nicht die $ nicht unterstützen ( "# myModal") modal ({Tastatur: false}).  
// Initialisieren und die Show sofort anrufen
$ ( "# MyModal"). Modal ( 'show')

Jedes Plug-in aufConstructor Eigenschaft macht auch seinen ursprünglichenKonstruktor:$ .fn.popover.Constructor.Wenn Sie eine Instanz von einem Widget zu bekommen möchten, können Sie direkt über die Seitenelemente erhalten: 

 $ ( '[Rel = popover]'). Die Daten ( 'popover').

Vermeiden Sie Namespace-Kollisionen

Manchmal Bootstrap Plugins müssen mit anderen UI Rahmen verwendet zu werden. In diesem Fall kann Namespace Kollisionen auftreten. Leider, wenn dies der Fall ist , können Sie den ursprünglichen Wert durch Aufrufen der Widget.noConflict Methoden wiederherstellen.

// Gibt .fn.button $ vor dem zugewiesenen Wert var bootstrapButton = $ .fn.button.noConflict () 
// Für die $ (). BootstrapBtn Funktionen verliehen Bootstrap					       
$ .fn.bootstrapBtn = BootstrapButton

Ereignis

Bootstrap bietet ein benutzerdefiniertes Ereignis als ein einzigartiges Verhalten der meisten Plug-Ins. Im Allgemeinen kommen diese Ereignisse in zwei Formen:

  • Infinitive: Diese wird ausgelöst, wenn das Ereignis beginnt.WieEx: anzeigen.Infinitive Veranstaltung bietet einepreventFunktion. Dies macht es möglich, den Betrieb zu stoppen, bevor das Ereignis begonnen. 
    $ ( '# MyModal'). Ein ( 'show.bs.modal', function (e) {
// Prevent modale Feld wird angezeigt, wenn (! Data) zurückkehren e.preventDefault () 
})
  • Partizip Form: Diese wird ausgelöst, nachdem der Vorgang abgeschlossen ist.WiezB: gezeigt.