Heim > Artikel > Web-Frontend > Erläuterung der Tab-Funktion in Bootstrap
Erläuterung der Tab-Funktion in Bootstrap
- 巴扎黑Original
- 2017-07-23 15:08:312020Durchsuche
Vorherige Wörter
Tabs sind eine sehr häufige Funktion im Web. Wenn der Benutzer auf den Menüpunkt klickt, kann der entsprechende Inhalt ausgeblendet werden. In diesem Artikel wird die grundlegende Verwendung der Bootstrap-Registerkarte im Detail vorgestellt
Die Registerkarte im Bootstrap-Framework besteht hauptsächlich aus zwei Teilen:
1 . Tab Die Menükomponente entspricht den Navigations-Tabs von Bootstrap
2. Die umschaltbare Tab-Panel-Komponente wird in Bootstrap normalerweise durch Tab-Bereich dargestellt
Im Bootstrap-Framework haben Tab-Navigations-Tabs Stile und der Bereich mit der Registerkarte „Panel-Inhalt“ wird ausgeblendet.
.tab-content > .tab-pane {display: none;
}.tab-content > .active {display: block;
}Die Registerkarte definiert das Datenattribut, um den Umschalteffekt auszulösen. Voraussetzung ist natürlich, dass zuerst bootstrap.js oder tab.js geladen wird. Deklarative Trigger-Registerkarten müssen die folgenden Anforderungen erfüllen:
1. Legen Sie data-toggle="tab"
im Tab-Navigationslink fest. 2. Und legen Sie data-target="corresponding" fest. Der Selektor von das Inhaltsfeld (normalerweise ID)“; wenn es sich um einen Link handelt, können Sie auch href="den Selektor des entsprechenden Inhaltsfelds (normalerweise ID)" verwenden. Die Hauptfunktion besteht darin, dass der Benutzer den entsprechenden Selektor finden kann, wenn Klicken Sie auf die Registerkarte „Inhalt des Panels“.
3. Der Panel-Inhalt wird einheitlich im Tab-Content-Container platziert, und für jedes Content-Panel-Tab-Fenster muss ein unabhängiger Selektor (vorzugsweise ID) und das Datenziel bzw. Datenziel im Tab festgelegt werden . Der Wert von href entspricht
<!-- 选项卡菜单--><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>
[Einblendeffekt]
Um das Panel auszublenden und anzuzeigen während des Umschaltvorgangs Für einen sanfteren Effekt können Sie dem Bedienfeld die Überblendung des Klassennamens hinzufügen, um einen allmählichen Effekt zu erzielen.
Beim Hinzufügen des Fade-Stils muss das anfänglich standardmäßig angezeigte Inhaltsfeld mit dem Klassennamen hinzugefügt werden, andernfalls kann der Benutzer seinen Inhalt nicht sehen
<!-- 选项卡菜单--><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>
【Kapsel-Tab】
In Bootstrap kann die Navigation in Kapsel-Navigationspillen zusätzlich zu Navigations-Tabs mit Tab-Umschaltfunktion auch über Tabs-Funktion verfügen. Ersetzen Sie einfach Nav-Tabs durch Nav-Pillen. Ein weiterer wichtiger Punkt ist, data-toggle="tab" durch data-toggle="pill"
<!-- 选项卡菜单--><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>
zu ersetzen
JS-Trigger
Zusätzlich zur Einstellung von Datenumschaltung in HTML zum Auslösen von Tabs kann er auch direkt über JavaScript aufgerufen werden.
Rufen Sie die Methode tab("show") im Klickereignis jedes Links auf, um den entsprechenden Inhalt des Beschriftungsfelds anzuzeigen. Löschen Sie für das obige Beispiel die benutzerdefinierten Attribute data-toggle="tab" oder data-toggle="pill" in HTML und rufen Sie dann
$(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
【Veranstaltungsabonnement】
show.bs.tab show方法调用之后立即触发该事件 shown.bs.tab 此事件在tab已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发 hide.bs.tab hide方法调用之后立即触发该事件。 hidden.bs.tab 此事件在tab被隐藏（并且同时在 CSS 过渡效果完成）之后被触发
<!-- 选项卡菜单-->
<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>
JS-Quellcode
【1】IIFE
Verwenden Sie die Sofortaufruffunktion, um zu verhindern, dass der Code im Plug-In ausläuft und so eine geschlossene Schleife entsteht und kann nur von jQuerys fn aus erweitert werden
+function ($) {//使用es5严格模式'use strict';//}(window.jQuery);【2】Anfangseinstellungen var Tab = function (element) {//指定当前元素this.element = $(element)
} //版本号为3.3.7
Tab.VERSION = '3.3.7' //动画时间为150ms
Tab.TRANSITION_DURATION = 150【3】Plug-in-Kerncode //show()方法用于触发show事件，调用activate原型方法，触发shown事件
Tab.prototype.show = function () {//当前tabvar $this = this.element//找到最近的ulvar $ul = $this.closest('ul:not(.dropdown-menu)')//找到data-target值var selector = $this.data('target')//如果data-target值不存在，查找href值if (!selector) {
selector = $this.attr('href') //IE7特殊处理 selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '')
}//如果当前tab已经是活动状态了，即父元素li上已经有active样式的话，直接返回if ($this.parent('li').hasClass('active')) return//找到上一个元素，即上一个带有active样式的li里的a元素var $previous = $ul.find('.active:last a')//设置hide事件var hideEvent = $.Event('hide.bs.tab', {
relatedTarget: $this[0]
})//设置show事件var showEvent = $.Event('show.bs.tab', {
relatedTarget: $previous[0]
})//触发hide事件及show事件 $previous.trigger(hideEvent)
$this.trigger(showEvent)//如果自定义回调中阻止了默认行为，则不再继续处理if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) return//要激活显示的面板，即target或href里的值所对应的元素var $target = $(selector)//高亮显示当前tabthis.activate($this.closest('li'), $ul)//显示对应的面板，并在回调里触发hidden及shown事件this.activate($target, $target.parent(), function () {
$previous.trigger({
type: 'hidden.bs.tab',
relatedTarget: $this[0]
})
$this.trigger({
type: 'shown.bs.tab',
relatedTarget: $previous[0]
})
})
} //active样式的应用，面板的显示和隐藏，以及tab的高亮与反高亮
Tab.prototype.activate = function (element, container, callback) {//查找当前容器所有有active样式的元素var $active = container.find('> .active')//判断是使用回调还是动画var transition = callback && $.support.transition && ($active.length && $active.hasClass('fade') || !!container.find('> .fade').length)function next() {
$active//去除其他元素的active样式.removeClass('active')//包括li元素里面的下拉菜单里的active样式也要去除.find('> .dropdown-menu > .active')
.removeClass('active')
.end()
.find('[data-toggle="tab"]')
.attr('aria-expanded', false)
element//给当前被单击的元素添加active高亮样式.addClass('active')
.find('[data-toggle="tab"]')
.attr('aria-expanded', true) if (transition) {//如果支持动画，就重绘页面element[0].offsetWidth //并添加in样式，去除透明element.addClass('in')
} else {//否则删除fadeelement.removeClass('fade')
} //如果单击的是下拉菜单里的项目 if (element.parent('.dropdown-menu').length) {
element //打到最近的li.dropdown元素进行高亮 .closest('li.dropdown')
.addClass('active')
.end()
.find('[data-toggle="tab"]')
.attr('aria-expanded', true)
} //如果有回调就执行回调 callback && callback()
}//如果支持动画$active.length && transition ? $active//在动画结束后执行next().one('bsTransitionEnd', next)
.emulateTransitionEnd(Tab.TRANSITION_DURATION) :
next()
$active.removeClass('in')
}【4】jQuery-Plug-in-Definition function Plugin(option) {//根据选择器，遍历所有符合规则的元素return this.each(function () { var $this = $(this) //获取自定义属性bs.tab的值 var data = $this.data('bs.tab') //如果值不存在，则将Tab实例设置为bs.tab值 if (!data) $this.data('bs.tab', (data = new Tab(this))) //如果option传递了string，则表示要执行某个方法 if (typeof option == 'string') data[option]()
})
} var old = $.fn.tab //保留其他库的$.fn.tab代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码
$.fn.tab = Plugin //重设插件构造器，可以通过该属性获取插件的真实类函数
$.fn.tab.Constructor = Tab【5】Anti-Konflikt-Verarbeitung $.fn.tab.noConflict = function () { //恢复以前的旧代码$.fn.tab = old//将$.fn.tab.noConflict()设置为Bootstrap的Tab插件return this
}【6】Bind-Trigger-Ereignis var clickHandler = function (e) {//阻止默认行为 e.preventDefault()//触发show()方法Plugin.call($(this), 'show')
}
$(document)//在document上绑定单击事件.on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
.on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)
Das obige ist der detaillierte Inhalt vonErläuterung der Tab-Funktion in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!