Plug-in Bootstrap js que vous devez acquérir tous les jours_compétences javascript

1. Présentation des plug-ins Bootstrap

Les composants abordés dans le chapitre précédent sur les composants de mise en page ne sont que le début. Bootstrap est livré avec 12 plug-ins jQuery, qui étendent les fonctionnalités et ajoutent plus d'interactivité au site. Même si vous n'êtes pas un développeur JavaScript avancé, vous pouvez commencer à apprendre le plugin JavaScript de Bootstrap. Grâce à l'API Bootstrap Data, la plupart des plugins peuvent être déclenchés sans écrire de code.

2. Importer le plug-in JavaScript

En plus des composants Web riches, Bootstrap comprend des menus déroulants, des groupes de boutons, une navigation, une pagination, etc. introduits précédemment. Il comprend également quelques plugins JavaScript.

Le plug-in JavaScript de Bootstrap peut être importé dans la page individuellement ou en une seule fois. Étant donné que les plug-ins JavaScript dans Bootstrap dépendent tous de la bibliothèque jQuery, la bibliothèque jQuery doit être importée en premier, qu'elle soit importée individuellement ou en une seule fois.

Importation unique :

Bootstrap fournit un fichier unique qui contient tous les plug-ins JavaScript de Bootstrap, à savoir bootstrap.js (version compressée : 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>

Importer individuellement :

Afin de faciliter l'importation séparée des fichiers d'effets spéciaux, Bootstrap V3.2 fournit 12 plug-ins JavaScript. Ce sont :

.

☑ Transitions d'animation : fichier plug-in correspondant « transition.js »

☑ Fenêtre pop-up modale (Modal) : le fichier plug-in correspondant "modal.js"

☑ Menu déroulant (Dropdown) : fichier du plug-in correspondant "dropdown.js"

☑ Détection de défilement (Scrollspy) : le fichier plug-in correspondant "scrollspy.js"

☑ Onglet : fichier plug-in correspondant "tab.js"

☑ Tooltips : fichier du plug-in correspondant "tooltop.js"

☑ Boîte Pop-up (Popover) : fichier plug-in correspondant "popover.js"

☑ Boîte d'avertissement (Alert) : fichier plug-in correspondant "alert.js"

☑ Boutons : fichier plug-in correspondant "button.js"

☑ Fold/Accordion (Collapse) : le fichier plug-in correspondant "collapse.js"

☑ Carrousel d'images Carrousel : Le fichier plug-in correspondant "carousel.js"

☑ Localiser automatiquement la bouée Affixer : Le fichier plug-in correspondant "affix.js"

3. attribut de données

Vous pouvez utiliser tous les plugins Bootstrap uniquement via l'API d'attribut de données sans écrire une seule ligne de code JavaScript. Il s'agit d'une API de première classe dans Bootstrap et devrait être votre premier choix.

Là encore, il peut y avoir des situations dans lesquelles cette fonctionnalité doit être désactivée. Par conséquent, nous proposons également un moyen de désactiver l'API d'attribut de données, c'est-à-dire de dissocier l'événement avec l'espace de noms data-api et de le lier au document. Comme ça :

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

Si vous devez fermer un plug-in spécifique, il vous suffit d'ajouter le nom du plug-in comme espace de noms avant l'espace de noms data-api, comme indiqué ci-dessous :

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

4. API de programmation

Nous fournissons une API JavaScript pure pour tous les plugins Bootstrap. Toutes les API publiques prennent en charge les méthodes d'appel individuelles ou en chaîne et renvoient la collection d'éléments sur lesquels elles opèrent (remarque : le formulaire d'appel est cohérent avec jQuery). Par exemple :

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

Toutes les méthodes peuvent accepter un objet options optionnel comme paramètre, ou une chaîne représentant une méthode spécifique, ou sans aucun paramètre (dans ce cas, le plugin sera initialisé au comportement par défaut), comme indiqué ci-dessous :

// 初始化为默认行为
$("#myModal").modal() 
 // 初始化为不支持键盘    
$("#myModal").modal({ keyboard: false }) 
// 初始化并立即调用 show
$("#myModal").modal('show')  

Chaque plugin expose également son constructeur d'origine sur la propriété Constructor : $.fn.popover.Constructor. Si vous souhaitez obtenir une instance d'un plugin spécifique, vous pouvez l'obtenir directement via l'élément page :

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

5. Évitez les conflits d'espace de noms

Parfois, les plugins Bootstrap doivent être utilisés avec d'autres frameworks d'interface utilisateur. Dans ce cas, un conflit d'espace de noms peut survenir. Si cela se produit malheureusement, vous pouvez restaurer sa valeur d'origine en appelant la méthode .noConflict du plugin.

// 返回 $.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。

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