Mots précédents
Les onglets sont une fonction très couramment utilisée sur le Web. Lorsque l'utilisateur clique sur l'élément de menu, le contenu correspondant peut être désactivé. Cet article présentera en détail l'utilisation de base de l'onglet Bootstrap
L'onglet du framework Bootstrap se compose principalement de deux parties :
1 . Onglet Le composant de menu correspond aux onglets de navigation de Bootstrap
2. Le composant du panneau d'onglets commutable est généralement représenté par un volet d'onglets dans Bootstrap
Dans le framework Bootstrap, les onglets de navigation ont styles et le volet de l'onglet du contenu du panneau est masqué. Seul le contenu actuel du panneau est affiché
1 2 3 | .tab-content > .tab-pane {display: none;
}.tab-content > .active {display: block;
}
|
Copier après la connexion
L'onglet définit l'attribut de données pour déclencher l'effet de commutation. Bien entendu, la condition préalable est de charger d’abord bootstrap.js ou tab.js. Les onglets de déclenchement déclaratif doivent répondre aux exigences suivantes :
1. Définissez data-toggle="tab"
dans le lien de navigation de l'onglet 2. Et définissez data-target="corresponding Le sélecteur de le panneau de contenu (généralement ID)" ; s'il s'agit d'un lien, vous pouvez également utiliser href="le sélecteur du panneau de contenu correspondant (généralement ID)". La fonction principale est que l'utilisateur puisse trouver le sélecteur qui lui correspond lorsqu'il en cliquant sur le volet de l'onglet Contenu du panneau.
3. Le contenu du panneau est uniformément placé dans le conteneur de contenu de l'onglet, et chaque volet d'onglet du panneau de contenu doit définir un sélecteur indépendant (de préférence un ID) et la cible de données ou la cible de données dans l'onglet. . La valeur des correspondances href
1 | <!-- 选项卡菜单--><ul id= "myTab" class = "nav nav-tabs" role= "tablist" ><li class = "active" ><a href= "#bulletin" role= "tab" data-toggle= "tab" >公告</a></li><li><a href= "#rule" role= "tab" data-toggle= "tab" >规则</a></li><li><a href= "#forum" role= "tab" data-toggle= "tab" >论坛</a></li><li><a href= "#security" role= "tab" data-toggle= "tab" >安全</a></li><li><a href= "#welfare" role= "tab" data-toggle= "tab" >公益</a></li></ul><!-- 选项卡面板 --><div id= "myTabContent" class = "tab-content" ><div class = "tab-pane active" id= "bulletin" >公告内容面板</div><div class = "tab-pane " id= "rule" >规则内容面板</div><div class = "tab-pane " id= "forum" >论坛内容面板</div><div class = "tab-pane " id= "security" >安全内容面板</div><div class = "tab-pane " id= "welfare" >公益内容面板</div></div>
|
Copier après la connexion
[Effet de fondu]
Afin de masquer et d'afficher le panneau. pendant le processus de commutation Pour un effet plus fluide, vous pouvez ajouter le fondu du nom de classe au panneau pour produire un effet progressif.
Lors de l'ajout du style de fondu, le panneau de contenu affiché par défaut initial doit être ajouté avec le nom de la classe, sinon l'utilisateur ne pourra pas voir son contenu
1 | <!-- 选项卡菜单--><ul id= "myTab" class = "nav nav-tabs" role= "tablist" ><li class = "active" ><a href= "#bulletin" role= "tab" data-toggle= "tab" >公告</a></li><li><a href= "#rule" role= "tab" data-toggle= "tab" >规则</a></li><li><a href= "#forum" role= "tab" data-toggle= "tab" >论坛</a></li><li><a href= "#security" role= "tab" data-toggle= "tab" >安全</a></li><li><a href= "#welfare" role= "tab" data-toggle= "tab" >公益</a></li></ul><!-- 选项卡面板 --><div id= "myTabContent" class = "tab-content" ><div class = "tab-pane fade in active" id= "bulletin" >公告内容面板</div><div class = "tab-pane fade" id= "rule" >规则内容面板</div><div class = "tab-pane fade" id= "forum" >论坛内容面板</div><div class = "tab-pane fade" id= "security" >安全内容面板</div><div class = "tab-pane fade" id= "welfare" >公益内容面板</div></div>
|
Copier après la connexion
【Onglet Capsule】
Dans Bootstrap, en plus des onglets de navigation ayant une fonction de changement d'onglet, la navigation par capsule nav-pills peut également avoir une fonction d'onglets. Remplacez simplement les onglets de navigation par les pilules de navigation. Un autre point clé est de remplacer data-toggle="tab"
par data-toggle="pill"
1 | <!-- 选项卡菜单--><ul id= "myTab" class = "nav nav-pills" role= "tablist" ><li class = "active" ><a href= "#bulletin" role= "tab" data-toggle= "pill" >公告</a></li><li><a href= "#rule" role= "tab" data-toggle= "pill" >规则</a></li><li><a href= "#forum" role= "tab" data-toggle= "pill" >论坛</a></li><li><a href= "#security" role= "tab" data-toggle= "pill" >安全</a></li><li><a href= "#welfare" role= "tab" data-toggle= "pill" >公益</a></li></ul><!-- 选项卡面板 --><div id= "myTabContent" class = "tab-content" ><div class = "tab-pane fade in active" id= "bulletin" >公告内容面板</div><div class = "tab-pane fade" id= "rule" >规则内容面板</div><div class = "tab-pane fade" id= "forum" >论坛内容面板</div><div class = "tab-pane fade" id= "security" >安全内容面板</div><div class = "tab-pane fade" id= "welfare" >公益内容面板</div></div>
|
Copier après la connexion
.
Déclencheur JS
En plus de définir la bascule de données en HTML pour déclencher des onglets, il peut également être appelé directement via JavaScript.
Appelez la méthode tab("show")
dans l'événement click de chaque lien pour afficher le contenu du panneau d'étiquette correspondant. Pour l'exemple ci-dessus, supprimez les attributs personnalisés data-toggle="tab" ou data-toggle="pill" en HTML, puis appelez
1 2 3 4 5 6 | $( function (){
$( "#myTab a" ).click( function (e){
e.preventDefault();
$(this).tab( "show" );
});
})
|
Copier après la connexion
1 2 3 4 5 6 | <!-- 选项卡菜单--><ul id= "myTab" class = "nav nav-pills" role= "tablist" ><li class = "active" ><a href= "#bulletin" role= "tab" >公告</a></li><li><a href= "#rule" role= "tab" >规则</a></li><li><a href= "#forum" role= "tab" >论坛</a></li><li><a href= "#security" role= "tab" >安全</a></li><li><a href= "#welfare" role= "tab" >公益</a></li></ul><!-- 选项卡面板 --><div id= "myTabContent" class = "tab-content" ><div class = "tab-pane fade in active" id= "bulletin" >公告内容面板</div><div class = "tab-pane fade" id= "rule" >规则内容面板</div><div class = "tab-pane fade" id= "forum" >论坛内容面板</div><div class = "tab-pane fade" id= "security" >安全内容面板</div><div class = "tab-pane fade" id= "welfare" >公益内容面板</div></div><script>$( function (){
$("#myTab a").click( function (e){
e.preventDefault();
$(this).tab("show");
});
})</script>
|
Copier après la connexion
【Abonnement à l'événement】
1 2 3 4 | show.bs.tab show方法调用之后立即触发该事件
shown.bs.tab 此事件在tab已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发
hide.bs.tab hide方法调用之后立即触发该事件。
hidden.bs.tab 此事件在tab被隐藏(并且同时在 CSS 过渡效果完成)之后被触发
|
Copier après la connexion
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!-- 选项卡菜单-->
<ul id= "myTab" class = "nav nav-pills" role= "tablist" >
<li class = "active" ><a href= "#bulletin" role= "tab" >公告</a></li>
<li><a href= "#rule" role= "tab" >规则</a></li>
<li><a href= "#forum" role= "tab" >论坛</a></li>
<li><a href= "#security" role= "tab" >安全</a></li>
<li><a href= "#welfare" role= "tab" >公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id= "myTabContent" class = "tab-content" >
<div class = "tab-pane fade in active" id= "bulletin" >公告内容面板</div>
<div class = "tab-pane fade" id= "rule" >规则内容面板</div>
<div class = "tab-pane fade" id= "forum" >论坛内容面板</div>
<div class = "tab-pane fade" id= "security" >安全内容面板</div>
<div class = "tab-pane fade" id= "welfare" >公益内容面板</div>
</div>
<script>$( function (){
$( "#myTab a" ).click( function (e){
e.preventDefault();
$(this).tab( "show" );
});
$( "#myTab" ).on( "show.bs.tab" , function (e){
$(e.target).css( 'outline' , '1px solid black' );
}).on( "hide.bs.tab" , function (e){
$(e.target).css( 'outline' , 'none' );
})
})</script>
|
Copier après la connexion
Code source JS
【1】IIFE
Utilisez la fonction d'appel immédiat pour empêcher le code du plug-in de fuir, formant ainsi une boucle fermée et ne peut s'étendre qu'à partir du fn de jQuery
Copier après la connexion
【2】Paramètres initiaux
1 2 3 4 | var Tab = function (element) {
}
Tab.VERSION = '3.3.7'
Tab.TRANSITION_DURATION = 150
|
Copier après la connexion
【3】Code principal du plug-in
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
Tab.prototype.show = function () {
selector = $this .attr( 'href' )
}
relatedTarget: $this [0]
})
relatedTarget: $previous [0]
})
$this .trigger(showEvent)
$previous .trigger({
type: 'hidden.bs.tab' ,
relatedTarget: $this [0]
})
$this .trigger({
type: 'shown.bs.tab' ,
relatedTarget: $previous [0]
})
})
}
Tab.prototype.activate = function (element, container, callback) {
$active
.removeClass( 'active' )
. end ()
.find( '[data-toggle="tab"]' )
.attr( 'aria-expanded' , false)
element
.find( '[data-toggle="tab"]' )
.attr( 'aria-expanded' , true) if (transition) {
} else {
}
element
.addClass( 'active' )
. end ()
.find( '[data-toggle="tab"]' )
.attr( 'aria-expanded' , true)
}
}
.emulateTransitionEnd(Tab.TRANSITION_DURATION) :
next()
$active .removeClass( 'in' )
}
|
Copier après la connexion
【4】Définition du plug-in jQuery
1 2 3 4 5 | function Plugin(option) {
})
} var old = $.fn.tab
$.fn.tab = Plugin
$.fn.tab.Constructor = Tab
|
Copier après la connexion
【5】Traitement anti-conflit
1 2 | $.fn.tab.noConflict = function () {
}
|
Copier après la connexion
【6】Événement déclencheur de liaison
1 2 3 4 5 | var clickHandler = function (e) {
}
$(document)
.on( 'click.bs.tab.data-api' , '[data-toggle="pill"]' , clickHandler)
|
Copier après la connexion
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!