Bootstrap 插件【二】

学习要点：

• 标签页（选项卡）
• 工具提示
• 弹出工具
• 警告

1.标签页(选项卡)

<div class="tabbable">
    <!-- 导航选项项 -->
    <ul class="nav nav-tabs">
        <!-- href="#tab1"与 id="tab1"关联-->
        <!-- data-toggle="tab" 调用选项卡 -->
        <li class="active"><a href="#tab1" data-toggle="tab">超值特惠</a></li>
        <li><a href="#tab2" data-toggle="tab">当季推荐</a></li>
        <li><a href="#tab3" data-toggle="tab">潮流搭配</a></li>
        <li class="dropdown">
            <a href="#"><a href="#" data-toggle="dropdown"> <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#tab4" data-toggle="tab">新品速递</a></li>
                <li><a href="#tab5" data-toggle="tab">特卖商品</a></li>
            </ul>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1"><img src="img/1.png"></div>
        <div class="tab-pane " id="tab2"><img src="img/2.png"></div>
        <div class="tab-pane " id="tab3"><img src="img/3.png"></div>
        <div class="tab-pane " id="tab4"><img src="img/4.png"></div>
        <div class="tab-pane " id="tab5"><img src="img/5.png"></div>
    </div>
</div>

调用：
第一种 ：使用 data-toggle=”tab”方法，上述就是
第二种 ：使用JS调用
HTML仅仅去掉 data-toggle=”tab”

$(function () {
    $(".nav-tabs a").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
    $(".nav-tabs a").on("show", function (e) {
         console.log(e.relatedTarget);
    })
    $(".nav-tabs a").on("shown", function (e) {
         console.log(e.target);
    })
})

2.工具提示

<a href="http://www.lamport.me/blog" title="百度一下，你就知道了" data-placement="top"><img src="img/logo.gif"></a>
<a href="http://www.lamport.me/blog" title="百度一下，你就知道了" data-placement="right"><img src="img/logo.gif"></a>
<a href="http://www.lamport.me/blog" title="百度一下，你就知道了" data-placement="bottom"><img src="img/logo.gif"></a>
<a href="http://www.lamport.me/blog" title="百度一下，你就知道了" data-placement="left"><img src="img/logo.gif"></a>

调用

$(function () {
    $("a").mouseover(function () {
        $("this").tooltip('show');
    });
})

事件

<a href="http://www.baidu.com">百度</a>

$(function () {
    $("a").tooltip({
        // 支持html标签
        html : true,
        // 显示的内容
        title : "<img src='img/logo.gif'/>",
        // 淡入淡出
        animation : true,
        // 在内容下方显示
        placement : 'bottom',
        // 延迟
        delay : {
            show : 1000,
            hide : 500
        }
    });
})

3.弹出工具，用法和工具提示类似，不再累赘

<a href="#" class="btn btn-large btn-success" title="弹出标题" data-content="我是弹出内容" data-placement="bottom">弹出内容</a>

调用

$(function () {
    $("a").popover();
})

4.警告

<div class="alert fade in">
    <!-- data-dismiss="alert" 点击关闭 -->
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>警告</strong>我是
</div>

也可以用js调用点击关闭

$(".close").click(function() {
        $(this).alert('close');
    });
    $('.alert').on('close', function () {
        console.log('close');
    });
    $('.alert').on('closed', function () {
        console.log('closed')
    })
});