JavaScript插件—

JavaScript插件——标签页

前言

阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html

本文主要来学习一下JavaScript插件--标签页。

标签页

之前通过组件只是简单的学习过这样的

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

当然效果就是这样，只是默认的激活了第一个标签 Home，然后不能点击。

现在我们来优化一下。

我们给上面的先预定义一些href的标签ID

     <ul class="nav nav-tabs">
      <li><a href="#home" >Home</a></li>
      <li><a href="#profile" >Profile</a></li>
      <li><a href="#messages" >Messages</a></li>
      <li><a href="#settings" >Settings</a></li>
      <li class="dropdown">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle">Test<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li ><a href="#AAA">@tag</a></li>
            <li ><a href="#BBB">@mag</a></li>
        </ul>
      </li>  
    </ul>

并且添加了一个下拉菜单。

然后现在我们继续的修正代码

    <ul class="nav nav-tabs">
      <li><a href="#home" data-toggle="tab">Home</a></li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" data-toggle="tab">Settings</a></li>
      <li class="dropdown">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle">Test<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li ><a data-toggle="tab" href="#AAA">@tag</a></li>
            <li ><a data-toggle="tab" href="#BBB">@mag</a></li>
        </ul>
      </li>  
    </ul>
    
    <div class="tab-content">
      <div class="tab-pane active" id="home">1..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
      <div class="tab-pane" id="profile">2..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
      <div class="tab-pane" id="messages">3..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
      <div class="tab-pane" id="settings">4..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
    <div class="tab-pane" id="AAA">A..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
    <div class="tab-pane" id="BBB">B..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
    </div>
    </div>

将标签页中的a标签都添加了一个属性data-toggle="tab"

然后在下面添加一个div的容器，并给与tab-content的样式类。

容器里面定义div，然后在div上添加id属性，和上面的href的标签ID对应，并添加tab-pane的样式类，其中一个如下，当然这个里面还添加了一个active的样式类，目的就是默认激活

<div class="tab-pane active" id="home">

最终现在每个标签页都可以进行点击，并且下拉菜单的菜单想也是可以点击，对应着我们为tab-content中定义的标签内容页。

可以看出上面的操作我们都是通过data属性就可以实现标签切换和内容展示的。

下面我们就通过JavaScript来进行实现

用法

通过JavaScript启动可切换标签页（每个标签页单独被激活）：

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

将所有代码贴上

View Code

就是将前面的代码a标签中的data-toggle属性去掉，这样应该就找不到下面的tab内容了，所以内容无法进行切换。

不过我们可以通过上面的JavaScript进行点击切换实现。

可以有以下几种方式单独激活标签页：

$('#myTab a[href="#profile"]').tab('show') 
$('#myTab a:first').tab('show') 
$('#myTab a:last').tab('show')
$('#myTab li:eq(2) a').tab('show')

只需要添加相应的事件进行调用就可以了。

只需为页面元素简单的添加data-toggle="tab" 或 data-toggle="pill"就可以无需写任何JavaScript代码也能激活标签页或胶囊式导航。为ul添加.nav和.nav-tabs classe即可为其赋予Bootstrap标签页样式；而添加nav和nav-pills class可以为其赋予胶囊标签页。

可以通过jQuery来执行首次的加载

<script>
  $(function () {
    $('#myTab a:first').tab('show')
  })
</script>

事件

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target //通过此参数可以获得激活的tab信息 
  e.relatedTarget // 激活之前的那一个tab的信息
})

总结

标签页的学习大体上简单的功能都实现了，虽然研究了很久，不过还是搞定了。

本文已更新至Bootstrap3.0入门学习系列导航http://www.cnblogs.com/aehyok/p/3404867.html

分类: BootStrap3.0

标签: BootStrap前端设计