Bootstrap의 탭 기능 설명
- 巴扎黑원래의
- 2017-07-23 15:08:312021검색
이전 단어
탭은 웹에서 매우 일반적으로 사용되는 기능입니다. 사용자가 메뉴 항목을 클릭하면 해당 콘텐츠가 전환될 수 있습니다. 이 글에서는 Bootstrap 탭의 기본 사용법을 자세히 소개합니다
Bootstrap 프레임워크의 탭은 주로 두 부분으로 구성됩니다:
1. Bootstrap의 nav-tabs
2에 해당하는 탭 메뉴 구성 요소. 전환된 탭 패널 구성 요소는 일반적으로 Bootstrap에서 탭 창으로 표시됩니다
Bootstrap 프레임워크에서 탭 탐색 탭에는 스타일이 있고 패널 내용 탭 창은 숨겨져 있으며 현재 패널 내용만 표시됩니다
.tab-content > .tab-pane {display: none;
}.tab-content > .active {display: block;
}
탭 전환 효과를 트리거하는 데이터 속성을 정의합니다. 물론 전제 조건은 bootstrap.js 또는 tab.js를 먼저 로드하는 것입니다. 선언적 트리거 탭은 다음 요구 사항을 충족해야 합니다.
1. 탭 탐색 링크에서 data-toggle="tab"
를 설정합니다. 2. 그리고 data-target=" 해당 콘텐츠 패널의 선택자(일반적으로 ID)"를 설정합니다. 링크인 경우 href="콘텐츠 패널(일반적으로 ID)에 해당하는 선택기"를 사용할 수도 있습니다. 주요 기능은 사용자가 클릭하면 선택기에 해당하는 패널 콘텐츠 탭 창을 찾을 수 있다는 것입니다.
3. 패널 콘텐츠는 탭 콘텐츠 컨테이너에 균일하게 배치되며, 각 콘텐츠 패널 탭 창은 탭의 data-target 또는 href 값과 일치하도록 독립적인 선택기(가급적 ID)를 설정해야 합니다.
<!-- 选项卡菜单--><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>【페이드 인 효과】
전환 과정에서 패널 숨김과 표시를 더 부드럽게 하기 위해 패널에 클래스 이름인 fade를 추가하여 페이드 인 효과를 낼 수 있습니다.
페이드 스타일을 추가할 때 초기 기본 표시 콘텐츠 패널은 클래스 이름으로 추가되어야 합니다. 그렇지 않으면 사용자가 해당 콘텐츠를 볼 수 없습니다
<!-- 选项卡菜单--><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>【캡슐 탭】
부트스트랩에서 , 탐색 탭에 탭 전환 기능을 추가하는 것 외에도 캡슐 탐색 알약 탐색에 탭 기능도 포함하도록 만들 수도 있습니다. nav-tabs를 nav-pills로 바꾸세요. 또 다른 핵심 사항은 data-toggle="tab"를 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>
data-toggle="tab"换成data-toggle="pill"
$(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
JS触发
除了在HTML设置 data-toggle 来触发选项卡之外，还可以通过JavaScript直接调用。
在每个链接的单击事件中调用tab("show")
JS Trigger
HTML에서 데이터 토글을 설정하여 탭을 트리거하는 것 외에도 JavaScript를 통해 직접 호출할 수도 있습니다.
tab("show") 메소드를 호출하면 해당 탭 패널 내용이 표시됩니다. 위의 예에서는 HTML에서 사용자 정의 data-toggle="tab" 또는 data-toggle="pill" 속성을 삭제한 후 다음 스크립트를 통해
公告内容面板
规则内容面板
论坛内容面板
安全内容面板
公益内容面板
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>
+function ($) {//使用es5严格模式'use strict';//}(window.jQuery);
JS source code
【1】IIFE
즉시 호출 기능을 사용하여 플러그인 내 코드가 유출되어 폐쇄 루프가 형성되는 것을 방지하고, 오직 jQuery의 fn Extension
var Tab = function (element) {//指定当前元素this.element = $(element)
} //版本号为3.3.7
Tab.VERSION = '3.3.7' //动画时间为150ms
Tab.TRANSITION_DURATION = 150【2】초기 설정
//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')
}【3】플러그인 코어 코드
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【4】jQuery 플러그인 정의
$.fn.tab.noConflict = function () { //恢复以前的旧代码$.fn.tab = old//将$.fn.tab.noConflict()设置为Bootstrap的Tab插件return this
}【5】충돌 방지 프로세싱
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)🎜【 6】바인드 트리거 이벤트🎜🎜rrreee🎜🎜🎜🎜 🎜위 내용은 Bootstrap의 탭 기능 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.