Detaillierte Erläuterung der Bootstrap-Plugin_Javascript-Fähigkeiten

Die im vorherigen Kapitel „Layoutkomponenten“ besprochenen Komponenten sind nur der Anfang. Bootstrap wird mit 12 jQuery-Plug-Ins geliefert, die die Funktionalität erweitern und der Site mehr Interaktivität verleihen. Auch wenn Sie kein fortgeschrittener JavaScript-Entwickler sind, können Sie mit dem Erlernen des JavaScript-Plugins von Bootstrap beginnen. Mit der Bootstrap Data API können die meisten Plugins ausgelöst werden, ohne dass Code geschrieben werden muss.

Es gibt zwei Möglichkeiten für eine Site, auf das Bootstrap-Plug-in zu verweisen :

Separate Referenz: Verwenden Sie einzelne *.js-Dateien von Bootstrap. Einige Plugins und CSS-Komponenten sind von anderen Plugins abhängig. Wenn Sie Plugins einzeln referenzieren, prüfen Sie unbedingt zunächst die Abhängigkeiten zwischen diesen Plugins.
Kompilieren Sie (auch) Referenzen: Verwenden Sie bootstrap.js oder eine minimierte Version von bootstrap.min.js.
„Versuchen Sie nicht, beide Dateien gleichzeitig zu referenzieren, da sowohl bootstrap.js als auch bootstrap.min.js alle Plugins enthalten.“

Alle Plugins sind auf jQuery angewiesen. Daher muss jQuery vor der Plugin-Datei in Anführungszeichen gesetzt werden. Bitte besuchen Sie Bower.json, um die derzeit von Bootstrap unterstützten jQuery-Versionen anzuzeigen.

1. Datenattribut Sie können alle Bootstrap-Plugins einfach über die Datenattribut-API verwenden, ohne eine einzige Zeile JavaScript-Code schreiben zu müssen. Dies ist eine erstklassige API in Bootstrap und sollte Ihre erste Wahl sein.
Andererseits kann es Situationen geben, in denen diese Funktion deaktiviert werden muss. Daher bieten wir auch eine Möglichkeit, die Datenattribut-API zu deaktivieren, d. h. die Bindung des Ereignisses an den Namespace data-api aufzuheben und an das Dokument zu binden. So:

$(document).off('.data-api')
Wenn Sie ein bestimmtes Plug-in schließen müssen, müssen Sie nur den Namen des Plug-ins als Namespace vor dem data-api-Namespace hinzufügen, wie unten gezeigt:
$(document).off('.alert.data-api')

2. Programmier-API Wir stellen eine reine JavaScript-API für alle Bootstrap-Plugins bereit. Alle öffentlichen APIs unterstützen Einzel- oder Kettenaufrufmethoden und geben die Sammlung von Elementen zurück, mit denen sie arbeiten (Hinweis: Die Aufrufform stimmt mit jQuery überein). Zum Beispiel:

$(".btn.danger").button("toggle").addClass("fat")

Alle Methoden können ein optionales Optionsobjekt als Parameter oder eine Zeichenfolge akzeptieren, die eine bestimmte Methode darstellt, oder ohne 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 stellt außerdem seinen ursprünglichen Konstruktor in der Constructor-Eigenschaft bereit: $.fn.popover.Constructor. Wenn Sie eine Instanz eines bestimmten Plugins erhalten möchten, können Sie diese direkt über das Seitenelement abrufen:

$('[rel=popover]').data('popover').

3. Vermeiden Sie Namensraumkonflikte
Manchmal müssen Bootstrap-Plugins möglicherweise mit anderen UI-Frameworks verwendet werden. In diesem Fall kann es zu einem Namensraumkonflikt kommen. Sollte dies leider passieren, können Sie den ursprünglichen Wert wiederherstellen, indem Sie die .noConflict-Methode des Plugins aufrufen.

// 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict()
// 为 $().bootstrapBtn 赋予 Bootstrap 功能             
$.fn.bootstrapBtn = bootstrapButton      

4. Veranstaltungen Bootstrap bietet benutzerdefinierte Ereignisse für das einzigartige Verhalten der meisten Plugins. Im Allgemeinen gibt es diese Ereignisse in zwei Formen:

Verb-Infinitiv: Dies wird zu Beginn des Ereignisses ausgelöst. Zum Beispiel: anzeigen. Infinitivereignisse stellen die Funktion „preventDefault“ bereit. Dadurch ist es möglich, die Ausführung einer Operation zu stoppen, bevor das Ereignis beginnt.

$('#myModal').on('show.bs.modal', function (e) {
// 阻止模态框的显示
 if (!data) return e.preventDefault()
})

Partizip Perfekt: Dies wird ausgelöst, nachdem die Aktion ausgeführt wurde. Zum Beispiel: angezeigt.

Das Obige ist ein kurzer Überblick über das Bootstrap-Plug-in. Ich hoffe, dass es für alle hilfreich ist, das Bootstrap-Plug-in zu verstehen.