【Bootstrap学习笔记】9.标签页和工具提示插件

十五、标签页和工具提示插件

学习内容

• 标签页插件
• 淡入淡出效果
• JavaScript方式
• 标签页插件事件
• 工具提示插件
• 工具提示插件的属性
• JavaScript方式声明
• JavaScript四个方法
• 需注意的两个属性

● 标签页插件

标签页插件就是通常所说的选项卡功能。
复习下导航组件

<!--复习导航附件-->
<ul class="nav nav-tabs">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">科技</a></li>
    <li><a href="#">资讯</a></li>
</ul>

标签页插件的关键点：
1.ul.nav>li>a 增加 href="#id" 属性用于锚点定位，增加 data-toggle="tab" 属性激活插件
2.切换内容框架 div.tab-content>div.tab-pane
3.每个 div.pane增加 id 属性对应锚点定位
4.胶囊式导航同样适用，div.nav.nav-tabs换成div.nav.nav-pills即可

<ul class="nav nav-tabs">
    <li class="active"><a href="#ONEPIECE" data-toggle="tab">ONEPIECE</a></li>
    <li><a href="#NARUTO" data-toggle="tab">NARUTO</a></li>
    <li><a href="#BLEACH" data-toggle="tab">BLEACH</a></li>
    <li><a href="#HUNTER" data-toggle="tab">HUNTER</a></li>
</ul>

<div class="tab-content" style="padding:10px;">
    <div id="ONEPIECE" class="tab-pane active">this is onepiece</div>
    <div id="NARUTO" class="tab-pane">this is naruto</div>
    <div id="BLEACH" class="tab-pane">this is bleach</div>
    <div id="HUNTER" class="tab-pane">this is hunter</div>
</div>

淡入淡出效果

.fade 淡入淡出效果的样式，加在div.tab-pane里
.in 首选的内容默认显示，加在div.tab-pane里

<div id="ONEPIECE" class="tab-pane active fade in">this is onepiece</div>

javascript方式

$(this).tab('show');

<ul id="nav" class="nav nav-pills">
<li class="active"><a href="#ONEPIECE">ONEPIECE</a></li>
    <li><a href="#NARUTO">NARUTO</a></li>
    <li><a href="#BLEACH">BLEACH</a></li>
    <li><a href="#HUNTER">HUNTER</a></li>
</ul>

<div class="tab-content" style="padding:10px;">
    <div id="ONEPIECE" class="tab-pane fade active in">this is onepiece</div>
    <div id="NARUTO" class="tab-pane fade">this is naruto</div>
    <div id="BLEACH" class="tab-pane fade">this is bleach</div>
    <div id="HUNTER" class="tab-pane fade">this is hunter</div>
</div>

<script>
    $('#nav a').on('click',function(e){
        //阻止默认行为，防止点到外面去
        e.preventDefault();
        $(this).tab('show');
    });
</script>

标签页插件事件

show.bs.tab
shown.bs.tab

<script>
   $('#nav a').on('show.bs.tab',function(){
        alert('show');
    });

    $('#nav a').on('shown.bs.tab',function(){
        alert('shown');
    });
</script>

● 工具提示插件

描述工具内容（如a、button），显示提示语
三个核心：
1.data-toggle="toolstip"
2.title="XXXXXXX"
3.必须使用JavaScript声明一下 $('a[data-toggle="tooltip"]').tooltip();
基本实例：<a href="#" data-toggle="toolstip" title="我的名字叫索隆">my name is zoro</a>

<!--系统自带提示框-->
<a href="#" title="我的名字叫路飞">my name is luffy</a>
<br>        
<!--bootstrip的提示框-->
<a href="#" title="我的名字叫索隆" data-toggle="tooltip">my name is zoro</a>

<script>
    $('a[data-toggle="tooltip"]').tooltip();
</script>

工具提示插件的属性：

• data-animation 默认true，淡入淡出效果
• data-html 默认false，不允许解析成html内容，如
  <a href="#" data-toggle="tooltip" data-html="true" title="<font color=red>红</font>">red</a>
  
• data-placement 默认top，还有bottom，left，right，auto。“auto left”会尽量在左边显示，左边不行就会在右边显示。
• data-original-title 和title属性一样，显示提示语内容，但优先级比title低
• data-trigger 默认hover、foucs，触发方式，其它还有click，manual。多个值用空格隔开，manual不能与其它同时设置。
• data-delay 默认0，显示\隐藏的延迟事件，单位毫秒（1秒=1000毫秒）。JavaScript方式可以分别设置显示和隐藏的毫秒数，如{show:500,hide:100}，示例看下节
• data-template 自定义提示框模板

JavaScript方式声明

<script>
    //默认属性
    //$('a').tooltip();

    //自定义属性
    $('a').tooltip({
        delay:{
            show:500,
            hide:900,
        },
        placement:'right',
    });
</script>

拓展
1.提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）,$(function () { $("[data-toggle='tooltip']").tooltip(); });
2.所以，html中有没有data-toggle="tooltip"就显得意义不大，javascript中一定要用$('a').tooltip();声明。
只要js中存在声明，那么属性不管是在html中定义，还是在js中定义，都起作用。

JavaScript四个方法

$('a').tooltip("show")显示
$('a').tooltip("hide") 隐藏
$('a').tooltip("toggle") 切换
$('a').tooltip("destroy") 销毁（无法再显示）

<script>
    $('button').on('click',function(){
        //显示
        //$('a').tooltip('show');
        //隐藏
        //$('a').tooltip('hide');
        //切换
        //$('a').tooltip('toggle');
        //销毁（无法再显示）
        $('a').tooltip('destroy');
    });
</script>

事件

show.bs.tooltip 显示前触发事件
shown.bs.tooltip 显示后触发事件
hide.bs.tooltip 隐藏前触发事件
hidden.bs.tooltip 隐藏后触发事件

需注意的两个属性

1.data-selector 默认false，可以选择绑定指定的选择器
比如有两个<a>，一个用bootstrip方式显示工具提示，一个用默认方式显示工具提示

<a id="a1" href="#" title="bootstrip方式显示工具提示">bootstrip方式显示工具提示</a>
<br>
<a id="a2" href="#" title="普通方式显示工具提示">普通方式显示工具提示</a>

<script>
    $('a').tooltip({
        selector:'a#a1',
    });
</script>

上面的写法并不会实现想要的效果：

这里需要将jquery选择器指定为a标签的父元素上，比如body上，或者外层套一个div

<div class="aa">
    <a id="a1" href="#" title="bootstrip方式显示工具提示">bootstrip方式显示工具提示</a>
    <br>
    <a id="a2" href="#" title="普通方式显示工具提示">普通方式显示工具提示</a>
</div>

<script>
    $('.aa').tooltip({
        selector:'a#a1',
    });
</script>

当然最简单的写法是直接用jquery选择器，选择”$(‘a#a1’)”就能实现想要的效果。data-selector实际用途需要拓展研究下

2.data-container 默认值false，向指定元素追加提示工具。实例： container: ‘body’
比如按钮组组件可能遇到以下情况：边框、容器不够换行

<div class="btn-group">
    <button class="btn btn-default" title="left">左</button>
    <button class="btn btn-default" title="center">中</button>
    <button class="btn btn-default" title="this is right">右</button>
</div>

<script>
    $('button').tooltip();
</script>

<script>
    $('button').tooltip({ 
        //加一个属性
        container:'body',
    });
</script>