Tab (onglet) En combinant certaines propriétés de données, vous pouvez facilement créer une interface d'onglet.
"Si vous souhaitez référencer la fonctionnalité du plugin séparément, vous devez référencer Tab.js. ou, comme mentionné dans le chapitre Bootstrap Plugin Présentation du plugin, vous pouvez référencer Bootstrap.js ou versions compressées de bootstrap.min.js."
1. Utilisation
Vous pouvez activer les pages d'onglet de deux manières:
Par propriété de données: vous devez ajouter data-toggle = "tab" ou data-toggle = "pilul" à la liaison texte d'ancrage.
L'ajout de classes NAV et NAV-TABS à UL appliquera le style de balise Bootstrap, l'ajout de classes NAV et NAV-PILLS à UL appliquera le style de capsule bootstrap.
<ul> <li> <a href = "# identifiant" data-toggle = "tab"> home </a> </li> ... </ul>
Via JavaScript: vous pouvez utiliser JavaScript pour activer les onglets comme suit:
$ ('# mytab a'). cliquez sur (fonction (e) {e.PreventDefault () $ (this) .tab ('show')})L'exemple suivant démontre l'activation des onglets individuels de différentes manières:
// sélectionnez la page onglet $ ('# mytab a [href = "# profil"]'). Tab ('show') // sélectionnez la première page d'onglet $ ('# mytab a: premier'). Tab ('show') // Sélectionnez la dernière page onglet $ ('# mytab a: dernier'). A '). Tab (' show ')2. Effet de fondu
Si vous devez définir un effet de fondu pour l'onglet, ajoutez .fade à chaque .tab-pane. Le premier onglet doit être ajouté avec une classe .in pour s'estomper pour afficher le contenu initial, comme indiqué dans l'exemple suivant:
<div> <div id = "home"> ... </ div> <div id = "svn"> ... </ div> <div id = "ios"> ... </div> <div id = "java"> ... </div> </div>
3. Méthode
. $ (). Tab: Cette méthode active les éléments de l'onglet et les conteneurs de contenu. La page d'onglet doit utiliser un cible de données ou un HREF pointant vers le nœud de conteneur dans le DOM.
<ul id = "mytab"> <li> <a href = "# identificateur" data-toggle = "tab"> home </a> </li> ..... </ul> <div> <div id = "home"> ... </v> .... </div> <script> $ (function () {$ ('# mytab a: dernier').Iv. Événements
La table suivante répertorie les événements à utiliser dans le plugin Tab (Tab). Ces événements peuvent être utilisés comme crochets dans les fonctions.
5. Exemples de base
1. Tags
Les pages d'onglet sont communément appelées fonctions d'onglet.
// Utilisation de base <ul> <li> <a href = "# html5" data-toggle = "tab"> html5 </a> </li> <li> <a href = "# bootstrap" data-toggle = "tab"> bootstrap </a> </li> <li> <a href = "# jquery" data-toggle = "tab"> jquery </li> <li> <a href = "# extjs" data-toggle = "tab"> extjs </a> </li> </ul> <div style = "padding: 10px;"> <div id = "html5"> ... </ div> <div id = "bootstrap"> ... </v> <div id = "jquery"> ... </ div> </div> </div>
// l'effet de fondu peut être défini et indique que le contenu préféré est affiché par défaut <div id = "html5"> // il peut également être remplacé par la capsule <ul> // data-target
L'effet de liaison ou non de liaison est le même avec le cible des données
// Utilisez JavaScript et utilisez directement la méthode de l'onglet. $ ('# nav a'). sur ('click', fonction (e) {e.PreventDefault (); $ (this) .tab ('show');}); // événements, autres similitudes $ ('# nav a'). Sur ('show.bs.tab', function () {alert ('free lors de l'appel d'appel!');}); $ ('# nav a'). on ('montré.bs.tab', fonction () {alert ('gratuit lors de l'affichage de l'onglet!');});Cette série de didacticiels a été compilée dans: Bootstrap Basic Tutorials Touss spéciaux, bienvenue pour cliquer pour apprendre.
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 de la table bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.