Einführung und Verwendung des Bootstrap-Plug-Ins

Übersicht über das Bootstrap-Plugin
Die im vorherigen Kapitel über Layoutkomponenten besprochenen Komponenten sind nur der Anfang. Die 12 jQuery-Plug-ins, die mit Bootstrap geliefert werden, verfügen über erweiterte Funktionen und können der Site weitere Interaktionen hinzufügen. Auch wenn Sie kein fortgeschrittener JS-Entwickler sind,
können Sie das JS-Plugin von Bootstrap erlernen. Mit der Bootstrap Data API können die meisten Plug-Ins ausgelöst werden, ohne dass Code geschrieben werden muss.
Es gibt zwei Möglichkeiten für die 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, stellen Sie sicher, dass Sie zunächst die Abhängigkeiten zwischen diesen Plugins herausfinden.
Referenz kompilieren (gleichzeitig): Verwenden Sie Bootstrap.js oder die komprimierte Version von bootstrap.min.js
Versuchen Sie nicht, beide Dateien gleichzeitig zu referenzieren, da sowohl bootstrap.js als auch bootstrap.min.js enthalten alle Plugins.
Alle Plugins sind auf jQuery angewiesen. Daher muss jQuery vor der Plug-in-Datei in Anführungszeichen gesetzt werden. Besuchen Sie bitte bower.json, um die aktuell von Boostrap unterstützte jQuery-Version anzuzeigen.
Datenattribut
Sie können alle Bootstap-Plug-Ins einfach über die Datenattribut-API verwenden, ohne eine Zeile Javascript-Code schreiben zu müssen. Dies ist die erstklassige API im Bootstrap und sollte Ihre bevorzugte Methode sein.
Andererseits kann es Situationen geben, in denen Sie die Funktion deaktivieren müssen. Daher stellen wir auch eine Methode zum Deaktivieren der Datenattribut-API bereit, d. h. zum Entsperren des an das Dokument gebundenen Ereignisses mit dem Namespace data-api. Wie folgt:
$(document).off('.data-api')
Wenn Sie ein bestimmtes Plug-in deaktivieren müssen, müssen Sie nur den Namen des Plug-ins vor dem hinzufügen data-api-Namespace, wie unten gezeigt:
$(document).off('.alert.data-api')
Programmatische API
Wir bieten reine Javascript-API für alle Bootstrap-Plug-Ins. Alle öffentlichen APIs unterstützen Einzel- oder Kettenaufrufmethoden und geben eine Sammlung von Elementen für alle Vorgänge zurück (Hinweis: Die Aufrufform stimmt mit jQuery überein).
$('.btn.danger').button('toggle').addClass('fat')

Importieren

[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)

[Einzelimport]

Zu Um den separaten Import von Spezialeffektdateien zu erleichtern, bietet Bootstrap 12 JavaScript-Plug-Ins, diese sind:

　☑ Animationsübergänge (Transitions): die entsprechende Plug-In-Datei „transition.js“

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

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

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

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

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

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

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

　☑ Buttons: Die entsprechende Plug-in-Datei „button.js“

　☑ Collapse/Accordion: Die entsprechende Plug-in-Datei „collapse. js“

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

　☑ Automatische Positionierung der Boje Affix: Die entsprechende Plug-in-Datei „affix.js“

Datenattribut

Ja Alle Bootstrap-Plug-Ins können einfach über die Datenattribut-API verwendet werden, ohne eine einzige Zeile JavaScript-Code zu schreiben. Dies ist eine erstklassige API in Bootstrap und sollte der bevorzugte Ansatz sein.

Andererseits kann es in einigen Fällen erforderlich sein, diese Funktion zu deaktivieren. Daher wird auch eine Methode zum Schließen der Datenattribut-API bereitgestellt, d. h. zum Entsperren des an das Dokument gebundenen Ereignisses mit data-api als Namespace. Wie folgt:

$(document).off('.data-api')

Wenn es sich außerdem um ein bestimmtes Plug-in handelt, fügen Sie einfach den Namen dieses Plug-ins als Namespace vor data-api hinzu , wie folgt:

$(document).off('.alert.data-api')

API

Bootstrap bietet eine reine JavaScript-API für alle Plugins. Alle öffentlichen APIs unterstützen Einzel- oder Kettenaufrufmethoden und geben den Satz von Elementen zurück, mit denen sie arbeiten, was mit der Aufrufform von jQuery übereinstimmt

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

Alle Methoden können ein optionales Optionsobjekt akzeptieren als Parameter oder eine Zeichenfolge, die eine bestimmte Methode darstellt oder nichts bereitstellt (in diesem Fall wird das Plugin mit Standardwerten initialisiert)

$('#myModal').modal()                      // 以默认值初始化$('#myModal').modal({ keyboard: false })   // initialized with no keyboard$('#myModal').modal('show')                // 初始化后立即调用 show 方法

　　每个插件还通过 Constructor 属性暴露了其原始的构造函数：$.fn.popover.Constructor。如果想获取某个插件的实例，可以直接通过页面元素获取：$('[rel="popover"]').data('popover')

【默认设置】

　　每个插件都可以通过修改其自身的 Constructor.DEFAULTS 对象从而改变插件的默认设置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

【避免命名空间冲突】

　　某些时候可能需要将 Bootstrap 插件与其他 UI 框架共同使用。在这种情况下，命名空间冲突随时可能发生。如果不幸发生了这种情况，可以通过调用插件的 .noConflict 方法恢复其原始值

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

【事件】

　　Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 show）表示其在事件开始时被触发；而过去式动词(如shown)表示在动作执行完毕之后被触发。

　　所有 Bootstrap 事件的名称都采用命名空间方式。所有以不定式形式的动词命名的事件都提供了 preventDefault 功能。这就赋予在动作开始执行前将其停止的能力

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

 

过渡效果

　　Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法：

　　☑ 调用统一编译的bootstrap.js；

　　☑ 调用单一的过渡动画的JavaScript插件文件transition.js

　　transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果

　　默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：

　　☑ 模态弹出窗（Modal）的滑动和渐变效果；

　　☑ 选项卡（Tab）的渐变效果；

　　☑ 警告框（Alert）的渐变效果；

　　☑ 图片轮播（Carousel）的滑动效果

　　transition.js 是针对 transitionEnd 事件的一个基本辅助工具，也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果

　　通过下面的代码可以在全局范围禁用过渡效果，并且必须将此代码放在transition.js(或bootstrap.js或bootstrap.min.js)后面，确保在js文件加载完毕后再执行下面代码

$.support.transition = false

Das obige ist der detaillierte Inhalt vonEinführung und Verwendung des Bootstrap-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!