Bootstrap Plugins-Übersicht
FrühereLayout-KomponentenDie in den vorherigen Kapiteln besprochenen Komponenten sind erst der Anfang. Bootstrap wird mit 12 jQuery-Plugins geliefert, die seine Funktionalität erweitern und Ihrer Website mehr Interaktivität verleihen können. Selbst wenn Sie kein erfahrener JavaScript-Entwickler sind, können Sie anfangen, die JavaScript-Plugins von Bootstrap zu lernen. Mit der Bootstrap Data API können die meisten Plugins ausgelöst werden, ohne Code zu schreiben.
Es gibt zwei Möglichkeiten, Bootstrap-Plugins auf einer Website einzubinden:
- Einzelne Referenzen: Verwenden Sie die einzelnen*.js-Dateien von Bootstrap. Einige Plugins und CSS-Komponenten hängen von anderen Plugins ab. Wenn Sie Plugins einzeln einbinden, stellen Sie sicher, dass Sie zuerst die Abhängigkeiten zwischen diesen Plugins verstehen.
- Kompilierte (gebündelte) Referenzen: Verwenden Siebootstrap.jsoder die minifizierte Version vonbootstrap.min.js。
Versuchen Sie nicht, beide Dateien gleichzeitig einzubinden, dabootstrap.jsundbootstrap.min.jsbeide alle Plugins enthalten.
Daten-Attribute
- Sie können alle Bootstrap-Plugins einfach über die Daten-Attribut-API verwenden, ohne eine einzige Zeile JavaScript-Code zu schreiben. Dies ist eine erstklassige API in Bootstrap und sollte Ihre bevorzugte Vorgehensweise sein.
- Freilich müssen Sie diese Funktion in einigen Fällen möglicherweise deaktivieren. Daher bieten wir auch eine Möglichkeit an, die Daten-Attribut-API auszuschalten, nämlich das Entknüpfen von Ereignissen, die dendata-api-Namensraum verwenden und an das Dokument gebunden sind. So wie hier:
$(document).off('.data-api') - Um ein bestimmtes Plugin zu deaktivieren, stellen Sie dem data-api-Namensraum einfach den Namen des Plugins als Namensraum voran, wie folgt:
$(document).off('.alert.data-api')
Programmatische API
Wir stellen eine reine JavaScript-API für alle Bootstrap-Plugins bereit. Alle öffentlichen APIs unterstützen einzelne oder verkettete Aufrufe und geben die Sammlung von Elementen zurück, auf denen sie arbeiten (Hinweis: konsistent mit der Aufrufkonvention von jQuery). Zum Beispiel:
$(".btn.danger").button("toggle").addClass("fat")
Alle Methoden können ein optionales Options-Objekt als Parameter akzeptieren, oder einen String, der eine bestimmte Methode darstellt, oder keine Parameter (in diesem Fall wird das Plugin mit dem Standardverhalten initialisiert), wie unten gezeigt:
// 初始化为默认行为
$("#myModal").modal()
// 初始化为不支持键盘
$("#myModal").modal({ keyboard: false })
// 初始化并立即调用 show
$("#myModal").modal('show')
Jedes Plugin macht über die EigenschaftConstructorauch seinen Originalkonstruktor verfügbar:$.fn.popover.Constructor. Wenn Sie eine Instanz eines bestimmten Plugins abrufen möchten, können Sie diese direkt über das Seitenelement erhalten:
$('[rel=popover]').data('popover').
Vermeidung von Namensraumkonflikten
Manchmal müssen Bootstrap-Plugins möglicherweise zusammen mit anderen UI-Frameworks verwendet werden. In diesem Fall kann es zu Namensraumkonflikten kommen. Wenn diese unglückliche Situation eintritt, können Sie die.noConflict-Methode des Plugins aufrufen, um seinen Originalwert wiederherzustellen.
// 返回 $.fn.button 之前所赋的值 var bootstrapButton = $.fn.button.noConflict() // 为 $().bootstrapBtn 赋予 Bootstrap 功能 $.fn.bootstrapBtn = bootstrapButton
Ereignisse
Bootstrap bietet benutzerdefinierte Ereignisse für die einzigartigen Verhaltensweisen der meisten Plugins. Im Allgemeinen treten diese Ereignisse in zwei Formen auf:
- Infinitiv: Dies wird zu Beginn des Ereignisses ausgelöst. Zum Beispielex: show. Infinitiv-Ereignisse bietenpreventDefault-Funktionalität. Dies macht es möglich, die Ausführung des Vorgangs zu stoppen, bevor das Ereignis beginnt.
$('#myModal').on('show.bs.modal', function (e) { // 阻止模态框的显示 if (!data) return e.preventDefault() }) - Partizip-Perfekt-Form: Dies wird ausgelöst, nachdem die Aktion abgeschlossen wurde. Zum Beispielex: shown。