Bootstrap选项卡
前面的话
选项卡Tabs是Web中一种非常常用的功能。用户点击对菜单项,能切换出对应的内容。本文将详细介绍Bootstrap选项卡
基本用法
Bootstrap框架中的选项卡主要有两部分内容组成:
1、选项卡菜单组件,对应的是 Bootstrap的 nav-tabs
2、可以切换的选项卡面板组件,在 Bootstrap 中通常 tab-pane 来表示
在Bootstrap框架中选项卡nav-tabs已带有样式,而对于面板内容tab-pane都是隐藏的,只有当前面板内容才是显示的
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
选项卡定义data属性来触发切换效果。当然前提要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求:
1、选项卡导航链接中要设置 data-toggle="tab"
2、并且设置 data-target="对应内容面板的选择符(一般是ID)";如果是链接的话,还可以通过 href="对应内容面板的选择符(一般是ID)",主要作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。
3、面板内容统一放在 tab-content 容器中,而且每个内容面板 tab-pane 都需要设置一个独立的选择符(最好是ID)与选项卡中的 data-target 或 href 的值匹配
<!-- 选项卡菜单-->
<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,让其产生渐入的效果。
在添加 fade 样式时,最初的默认显示的内容面板一定要加上 in 类名,不然用户无法看到其内容
<!-- 选项卡菜单-->
<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>
【胶囊式选项卡】
在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外,还可以让胶囊式 nav-pills 导航也具有选项卡的功能。只需要将 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>
JS触发
除了在HTML设置 data-toggle 来触发选项卡之外,还可以通过JavaScript直接调用。
在每个链接的单击事件中调用tab("show")
方法,显示对应的标签面板内容。针对上面的示例,删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性,然后通过下面的脚本来调用
$(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
<!-- 选项卡菜单-->
<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>
【事件订阅】
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源码
【1】IIFE
使用立即调用函数,防止插件内代码外泄,从而形成一个闭环,并且只能从jQuery的fn里进行扩展
+function ($) {
//使用es5严格模式
'use strict';
//
}(window.jQuery);
【2】初始设置
var Tab = function (element) {
//指定当前元素
this.element = $(element)
}
//版本号为3.3.7
Tab.VERSION = '3.3.7'
//动画时间为150ms
Tab.TRANSITION_DURATION = 150
【3】插件核心代码
//show()方法用于触发show事件,调用activate原型方法,触发shown事件
Tab.prototype.show = function () {
//当前tab
var $this = this.element
//找到最近的ul
var $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)
//高亮显示当前tab
this.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 {
//否则删除fade
element.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插件定义
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】防冲突处理
$.fn.tab.noConflict = function () {
//恢复以前的旧代码
$.fn.tab = old
//将$.fn.tab.noConflict()设置为Bootstrap的Tab插件
return this
}
【6】绑定触发事件
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)
Bootstrap选项卡的更多相关文章
- echarts之bootstrap选项卡不能显示其他标签echarts图表
在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表. 解决方法: 在js中添加代码: ...
- bootstrap 选项卡的使用
1.页面中的tab 在做项目的时候用到了切换选项卡显示不同图表页面的 需求,如下图 就直接使用了bootstrapd的选项卡 学习源头: http://www.runoob.com/bootstrap ...
- bootstrap选项卡页面中如何关闭当前选项卡及页面
再具体说一下现在的需求: 如上界面:在新闻发布界面有一个按钮,在点击按钮的时候我需要直接把这个打开的选项卡关闭 实现思路: 1)关闭选项卡对应的页面 2)去除上方选项卡 3)激活前一 ...
- Bootstrap页面布局17 - BS选项卡
代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...
- bootstrap如何设置每一个选项卡对应一个页面
bootstrap选项卡如果直接在每一个选项div中直接插入页面,可以使用<object type="text/html" data="test.html" ...
- 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...
- Bootstrap学习目录
前面的话 Bootstrap与CSS的关系,类似于javascript与jQuery的关系,原理与应用的关系.只是jQuery不再火爆,而Bootstrap依然火热,它在github有着超过100万的 ...
- 前端之移动端库和框架bootstrap
学习移动端场景下的js事件:制作移动端特效常用的js库:介绍移动端常用开发框架Bootstrap:介绍动态样式语言less.sass.stylus的基本使用. 移动端js事件 移动端的操作方式和PC端 ...
- 解决Bootstrap标签页(Tab)插件切换echarts不显示问题
1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...
随机推荐
- R与并行计算(转)
文章摘要 本文首先介绍了并行计算的基本概念,然后简要阐述了R和并行计算的关系.之后作者从R用户的使用角度讨论了隐式和显示两种并行计算模式,并给出了相应的案例.隐式并行计算模式不仅提供了简单清晰的使用方 ...
- IT培训行业揭秘(六)
2017年全国的IT职业培训机构的招生数量相比于去年同期都出现了大规模的下滑,虽然目前大学生毕业之后参加培训班的人数依然没有变化,但是目前中小培训机构像雨后春笋般的纷纷建立,他们纷纷抢占市场,为了招生 ...
- 并行类加载与OSGI类加载
这回来分析一下OSGI的类加载机制. 先说一下OSGI能解决什么问题吧. 记得在上家公司的时候,经常参与上线.上线一般都是增加了一些功能或者修改了一些功能,然后将所有的代码重新部署.过程中要将之前的服 ...
- JavaSE教程-02Java基本语法-BUG:易错点
1.区别文档注释和多行注释 多行注释:多一个* 多行注释 格式: /* 注释文字 */ 文档注释 格式:/** 注释文字 */ 2.有关变量名.类名.方法名等注意点 由字母.数字.下划线.$组成,但不 ...
- struts2+hibernate+spring配置版框架搭建以及简单测试(方便脑补)
为了之后学习的日子里加深对框架的理解和使用,这里将搭建步奏简单写一下,目的主要是方便以后自己回来脑补: 1:File--->New--->Other--->Maven--->M ...
- Vulkan Tutorial 12 Fixed functions
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 早起的图形API在图形渲染管线的许多阶段提供了默认的状态.在Vulkan中,从vie ...
- 微信小程序开发 -- 02
微信小程序开发 --02 微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码 ...
- js脚本都可以放在哪些地方
js脚本应该放在页面的什么地方 1.head部分 包含函数的脚本位于文档的 head 部分.这样我们就可以确保在调用函数前,脚本已经载入了. 2.body部分 执行位于 body 部分的脚本. 3.外 ...
- Safari Private 模式下 localStorage 的问题
现如今好多浏览器都有「隐身模式」,Safari 管这叫「Private Browing」,国内各种牌子的套壳浏览器叫「无痕浏览」.私以为从命名上来说,倒是国内更中文一些. 这种模式下浏览网页踏雪无痕, ...
- UIPopoverPresentationController使用
UIPopoverPresentationController是什么? iOS8.0之后引入的一个方便开发者创建带箭头的弹出控制器,类似qq消息页面点击右上角加号弹出的视图. UIPopoverPre ...