Bootstrap JS插件使用实例(5)-标签页

标签页需要引入bootstrap-tab.js

利用bootstrap提供的标签页的样式做个简单示例，可直接粘贴运行：

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标签页示例</title>
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="http://www.see-source.com/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="http://www.see-source.com/bootstrap/js/bootstrap-tab.js"  type="text/javascript"></script>
</head>

<body style="width:500px; margin:auto;">
  <ul class="nav nav-tabs">
     <li class="active"><a href="#home" data-toggle="tab" >首页</a></li>
     <li class=""><a href="#profile" data-toggle="tab" >介绍</a></li>
  </ul>

  <div class="tab-content">
     <div class="tab-pane active" id="home">
              <p>
		5月6日，北京，一对新人启用直升机接亲。该直升机是欧洲直升机公司系列，机型为AS350B3，该公司北京唯一可承接低空飞行业务的航空公司，此次为首次承接婚礼。据悉，首次空中婚礼总费用为5万元。定价包括飞行时间和申报审批等费用，飞行时间按照1小时3万元计算。
	      </p>
     </div>
     <div class="tab-pane" id="profile">
              <p>
		法国代表社会党参选的奥朗德今晨在大选中获得胜利，成为法兰西第五共和国第七位总统，法国也在17年之后迎来首位左翼总统。萨科齐在5年任内因政绩不佳引发不满，选前处于民调落后的劣势。萨科齐虽试图打造“危机总统”形象，但终未能实现逆转。奥朗德现年58岁，至今未婚，与社会党前总统选举候选人罗亚尔同居30多年，育有4子女，多年来坚持骑车上下班。对华关系持强硬立场。
	      </p>
     </div>
  </div>
</body>
</html>

运行效果如下：

需要注意：

Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。

<!DOCTYPE html> 
<html lang="en"> 
 ... 
</html>

下面来对上面的代码进行解析下：

bootstrap.css Bootstrap 样式库，这是必不可少的。

jquery.js 引入jquery，Bootstrap插件是jquery插件，依赖于jquery。

bootstrap-tab.js 标签页插件

分析标签页结构：

<ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab" >首页</a></li>
    <li class=""><a href="#profile" data-toggle="tab" >介绍</a></li>
</ul>

.nav和.nav-tabs定义标签页的标签列表容器。

<div class="tab-content">
    <div class="tab-pane active" id="home">
              ...
    </div>
    <div class="tab-pane" id="profile">
             ...
    </div>
</div>

标签页的内容容器，由.tab-content定义。每个具体的内容页由.ta-pane定义。另外每个内容页都必须设置id，并且其值必须与某个标签中链接的href值一致，否则二者无法建立联系。如：id="home"与<a href="#home">。

样式结构已经确定了，看看如何通过Bootstrap的bootstrap-tab.js插件使其成为标签页。

1.通过data属性(或叫标记)

在作为标签的元素上设置 data-toggle="tab" 或 data-toggle="pill" 即可，而无须编写javascript，就可以激活标签页或是胶囊链接，如上面示例中那样：

<ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab" >首页</a></li>
    <li class=""><a href="#profile" data-toggle="tab" >介绍</a></li>
</ul>

将超链接(<a>)作为标签，在其上设置data-toggle="tab"属性，同时href=""的值必须与内容容器中的某个内容的id一致。

<div class="tab-content">
    <div class="tab-pane active" id="home">
              ...
    </div>
    <div class="tab-pane" id="profile">
              ...
    </div>
</div>

2.通过javascript

$().tab('show')

上面的js语句是将某个标签页激活同时成为当前状态。如：

<a href="#profile" id="introduce">介绍</a>

则可以$(“#introduce”).tab('show')。注意上面的js语句并非是绑定方法，也就是执行它，则某个标签才被激活并成为当前页，以后每次激活标签时都必须执行。因为如此可以为每个标签添加click(单击)事件，事件触发时执行$().tab('show')将标签激活，如下：

<ul class="nav nav-tabs" id="myTab">
    <li><a href="#home">首页</a></li>
    <li><a href="#profile" >介绍</a></li>
</ul>

对于上面的代码，我们就可以这样为每个标签添加click事件，如下：

$('#myTab a').click(function (e) {
  $(this).tab('show');
})

完毕。显然js的方法要比data属性麻烦点，建议一般还是使用data属性。

事件

bootstrap还为标签页操作提供俩个事件，如下：

事件	描述
show	该事件在标签开始展示时（尚未渲染完之前）触发。 `event.target` 指向要激活的标签， `event.relatedTarget` 提向之前已激活的标签（如果有的话）。
shown	该事件在标签已经呈现后（已渲染完成）触发。 `event.target` 指向要激活的标签， `event.relatedTarget` 提向之前已激活的标签（如果有的话）。

可通过如下方法为每个标签添加事件，

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

上面的代码是为通过data属性设置的标签页中的每个标签添加shown事件，当然我们也可以为某个标签单独添加事件，如下：

<a href="#home" data-toggle="tab" id="aaaa">首页</a>

添加了id属性，则就可以利用如下代码添加事件：

$('#aaaa').on('show', function (e) {
  ...
})

带下拉菜单的标签页

经常某个标签还可能是个某个下拉菜单，如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>带下拉菜单标签页示例</title>
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="http://www.see-source.com/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="http://www.see-source.com/bootstrap/js/bootstrap-tab.js" type="text/javascript"></script>
<script src="http://www.see-source.com/bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
</head>

<body style="width:500px; margin:auto;">
  <ul id="tab" class="nav nav-tabs">
     <li class=""><a href="#home" data-toggle="tab">首页</a></li>
     <li class="active"><a href="#profile" data-toggle="tab">介绍</a></li>
     <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
       <ul class="dropdown-menu">
          <li class=""><a href="#dropdown1" data-toggle="tab">智慧</a></li>
          <li class=""><a href="#dropdown2" data-toggle="tab">夜壶</a></li>
       </ul>
     </li>
  </ul>

  <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade" id="home">
              <p>
		5月6日，北京，一对新人启用直升机接亲。该直升机是欧洲直升机公司系列，机型为AS350B3，该公司北京唯一可承接低空飞行业务的航空公司，此次为首次承接婚礼。据悉，首次空中婚礼总费用为5万元。定价包括飞行时间和申报审批等费用，飞行时间按照1小时3万元计算。
	      </p>
      </div>
      <div class="tab-pane fade active in" id="profile">
              <p>
		法国代表社会党参选的奥朗德今晨在大选中获得胜利，成为法兰西第五共和国第七位总统，法国也在17年之后迎来首位左翼总统。萨科齐在5年任内因政绩不佳引发不满，选前处于民调落后的劣势。萨科齐虽试图打造“危机总统”形象，但终未能实现逆转。奥朗德现年58岁，至今未婚，与社会党前总统选举候选人罗亚尔同居30多年，育有4子女，多年来坚持骑车上下班。对华关系持强硬立场。
	      </p>
      </div>
      <div class="tab-pane fade" id="dropdown1">
              <p>
		平壤某鱼肉样板店经理日云硕（音），在去年金正日和金正恩来店视察时，曾目睹这样一幕：金正恩将父亲让进电梯，然后自己嗖嗖地爬上三层楼梯，电梯再次打开时，他立正向父亲致意。日云硕动情地回忆说：“我被他的忠诚与智慧折服了...”
	      </p>
      </div>
      <div class="tab-pane fade" id="dropdown2">
              <p>
		不是政府人士，永远不要去做政府的吹鼓手，因为吹鼓手在政府眼里永远只值一个夜壶铜钿，尿急了拿出来用一下，用完了将夜壶放到最角落地方；你吹得越起劲，不仅公众看不起你，政府更看不起你，所以吹鼓手都没有好下场。-----杜月笙
	      </p>
      </div>
  </div>
</body>
</html>

首先导入下拉菜单插件 bootstrap-dropdown.js。然后直接在标签列表中加个下拉菜单，在将每个下拉菜单项都加入data属性： data-toggle="tab" 即可。

上面代码可直接粘贴运行。

+友情链接