zoukankan      html  css  js  c++  java
  • Bootstrap学习js插件篇之标签页

    简单的标签页

    代码:

     

    [javascript] view plaincopy在CODE上查看代码片派生到我的代码片
    1. <h1 class="page-header">4.3标签页</h1>  
    2.     <ul class="nav nav-tabs">  
    3.         <li class="active"><a href="#">Home</a></li>  
    4.         <li><a href="#">Profile</a></li>  
    5.         <li><a href="#">Message</a></li>  
    6.     </ul>  

    预览下:

     

    给上面的先预定义一些href的标签ID,添加一个下拉菜单

     

    [javascript] view plaincopy在CODE上查看代码片派生到我的代码片
    1. <ul class="nav nav-tabs">  
    2.       <li><a href="#home" >Home</a></li>  
    3.       <li><a href="#profile" >Profile</a></li>  
    4.       <li><a href="#messages" >Messages</a></li>  
    5.       <li><a href="#settings" >Settings</a></li>  
    6.       <li class="dropdown">  
    7.           <a href="#" data-toggle="dropdown" class="dropdown-toggle">Test<b class="caret"></b></a>  
    8.           <ul class="dropdown-menu">  
    9.             <li ><a href="#AAA">@tag</a></li>  
    10.             <li ><a href="#BBB">@mag</a></li>  
    11.         </ul>  
    12.       </li>    
    13.     </ul>  

     

    将标签页中的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启动可切换标签页(每个标签页单独被激活):

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

    去掉所有a标签的data-toggle然后调用js

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

    $('#myTab a[href="#profile"]').tab('show') // Select tab by name
    $('#myTab a:first').tab('show') // Select first tab
    $('#myTab a:last').tab('show') // Select last tab
    $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

    只需为页面元素简单的添加data-toggle="tab" 或 data-toggle="pill"就可以无需写任何JavaScript代码也能激活标签页或胶囊式导航。为ul添加.nav.nav-tabs classe即可为其赋予Bootstrap标签页样式;而添加navnav-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的信息
    })
    [javascript] view plaincopy在CODE上查看代码片派生到我的代码片
    1. <script type="text/javascript">  
    2. $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {  
    3.   //e.target // activated tab  
    4.   //e.relatedTarget // previous tab  
    5.     alert("目标:"+e.target);  
    6.     alert("相关:"+e.relatedTarget);  
    7.     })  
    8. </script>  

     

     

     

    渐入效果

     

    为每个.tab-pane添加.fade可以让标签页具有淡入的特效。第一个标签页所对应的的内容区必须也添加.in使初始内容同时具有淡入效果。

    <div class="tab-content">
      <div class="tab-pane fade in active" id="home">...</div>
      <div class="tab-pane fade" id="profile">...</div>
      <div class="tab-pane fade" id="messages">...</div>
      <div class="tab-pane fade" id="settings">...</div>
    </div>
  • 相关阅读:
    来自CSDN的精华网址
    图片及生成缩略图
    那位对DataGrid控熟悉?能否请教一下
    关于用.NET写邮件发送系统的问题
    JavaScript]几种常用的表单输入判断
    VB C# 语法对比图
    给上传的图片加上一个水印
    那位对DataGrid控熟悉?能否请教一下
    一句话木马的免杀(转)
    SOAP注入攻击详解(转)
  • 原文地址:https://www.cnblogs.com/ranzige/p/4012957.html
Copyright © 2011-2022 走看看