Cet exemple introduit l'application de l'implémentation de l'onglet Tab. Ce plug-in est relativement simple. Le contenu spécifique est le suivant
Fichier de code source:
tab.js
Principe de mise en œuvre:
1. Lorsque vous cliquez sur un élément, annulez d'abord l'élément mis en surbrillance initialement.
2. Puis surveille l'élément cliqué
3. Si cliquer sur un élément est une option dans la case déroulante, sélectionnez lui-même et sélectionnez également la boîte déroulante.
5. Si l'animation est définie, exécutez d'abord l'animation puis rappelle
Analyse du code source:
1. La méthode Show est déclenchée lorsqu'un élément est cliqué, ce qui déclenchera les quatre événements suivants.
1.1. Hiden.bs.tab: cachez l'élément précédent
1.2. Show.bs.tab: afficher l'élément actuel
1.3. Hideen.bs.tab: terminé en cachant l'élément précédent
1.4. A montré.bs.tab: afficher l'élément actuel complet
1.5. Code source d'événement Hiden / Show:
var $ précédemment = $ ul.find ('. actif: dernier a') var hideevent = $ .event ('hide.bs.tab', {lindtarget: $ this [0]}) var showevent = $ .event ('show.bs.tab', {lindtarget: $ précédent [0]})2. Actif: activer l'objet actuel
2.1. Ajouter un attribut Aria à l'élément de navigation pour marquer si cet élément est à l'état élargi
2.2. À l'aide du mécanisme de reflux, utilisez l'attribut OffsetWidth pour réaliser une repeinture partielle
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Cette série de tutoriels a été compilée dans: Bootstrap Basic Tutorials Topic spécial, bienvenue pour cliquer pour apprendre.
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.