Bootstrap-JS-Plug-in, das Sie jeden Tag erlernen müssen_Javascript-Kenntnisse

1. Übersicht über Bootstrap-Plug-ins

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.

2. JavaScript-Plugin importieren

Zusätzlich zu Rich-Web-Komponenten umfasst Bootstrap Dropdown-Menüs, Schaltflächengruppen, Navigation, Paging usw., die zuvor eingeführt wurden. Es enthält auch einige JavaScript-Plugins.

Das JavaScript-Plugin von Bootstrap kann einzeln oder auf einmal in die Seite importiert werden. Da die JavaScript-Plug-Ins in Bootstrap alle von der jQuery-Bibliothek abhängen, muss die jQuery-Bibliothek zuerst importiert werden, unabhängig davon, ob sie einzeln oder alle auf einmal importiert wird.

Einmaliger Import:

Bootstrap stellt eine einzige Datei bereit, die alle JavaScript-Plug-Ins von Bootstrap enthält, nämlich bootstrap.js (komprimierte Version: bootstrap.min.js).

<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
<script src="js/bootstrap.min.js"></script>

Einzeln importieren:

Um den separaten Import von Spezialeffektdateien zu erleichtern, bietet Bootstrap V3.2 12 JavaScript-Plug-Ins:

☑ Animationsübergänge: entsprechende Plug-in-Datei „transition.js“

☑ Modales Popup-Fenster (Modal): die entsprechende Plug-in-Datei „modal.js“

☑ Dropdown-Menü (Dropdown): entsprechende Plug-in-Datei „dropdown.js“

☑ Scroll-Erkennung (Scrollspy): die entsprechende Plug-in-Datei „scrollspy.js“

☑ Tab: entsprechende Plug-in-Datei „tab.js“

☑ Tooltips: entsprechende Plug-In-Datei „tooltop.js“

☑ Popup-Box (Popover): entsprechende Plug-in-Datei „popover.js“

☑ Warnfeld (Alert): entsprechende Plug-in-Datei „alert.js“

☑ Schaltflächen: entsprechende Plug-In-Datei „button.js“

☑ Fold/Accordion (Collapse): die entsprechende Plug-in-Datei „collapse.js“

☑ Bildkarussell Karussell: Die entsprechende Plug-in-Datei „carousel.js“

☑ Boje automatisch lokalisieren Affix: Die entsprechende Plug-in-Datei „affix.js“

3. 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')

4. 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').

5. 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   

6、事件

Bootstrap 为大多数插件的独特行为提供了自定义事件。一般来说，这些事件有两种形式：
动词不定式：这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。

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

过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。

以上就是本文的全部内容，希望对大家的学习有所帮助。