Bootstrap标签页和工具提示插件

标签页插件

标签页就是通常所说的选项卡功能

//也可以换成胶囊式
//<ul class="nav nav-pills">
<ul id="nav" class="nav nav-tabs">
    <li class="active"><a href="#html5">HTML5</a></li>
    <li><a href="#bootstrap">Bootstrap</a></li>
    <li><a href="#jquery">jQuery</a></li>
    <li><a href="#extjs">ExtJS</a></li>
</ul>

<div class="tab-content" style="padding:10px;">
    //设置淡出淡出效果 fade，而in表示首选的内容默认显示
    <div class="tab-pane active fade in" id="html5">标准通用标记语言下的一个应用 HTML 标准自 1999 年 12 月发布的 HTML4.01 后，后继的 HTML5 和其它标准被束之高阁，为了推动 Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组 -WHATWG）的组织。WHATWG 致力于 Web 表单和应用程序，而 W3C（World Wide Web Consortium，万维网联盟） 专注于 XHTML2.0。在 2006年，双方决定进行合作，来创建一个新版本的 HTML。</div>
    <div class="tab-pane fade" id="bootstrap">Bootstrap，来自Twitter，是目前很受欢迎的前端框架。 Bootstrap 是基于 HTML、CSS、JAVASCRIPT的，它简洁灵活，使得 Web 开发更加快捷。[1] 它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS/HTML 框架。Bootstrap提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目，包括 NASA 的 MSNBC（微软全国广播公司）的 Breaking News 都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架，如 WeX5 前端开源框架等，也是基于 Bootstrap 源码进行性能优化而来。[3] </div>
    <div class="tab-pane fade" id="jquery">JQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的 js库 ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）， jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。jQuery有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery 能够使用户的 html 页面保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆 js 来调用命令了，只需要定义 id 即可。</div>
    <div class="tab-pane fade" id="extjs">近几年随着 jQuery、Ext 以及 CSS3 的发展，以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野，可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对这些框架进行初步的介绍与比较，希望能够为大家选择框架提供一点帮助，也为后续详细研究这些框架的抛砖引玉。</div>
</div>

效果图如下：

//使用Javascript,直接使用tab方法
$('#nav a').on('click',function(e){
    // 阻止默认行为
    e.preventDefault();
    $(this).tab('show');
});

事件类型	描述
show.bs.tab	在调用tab方法时触发
shown.bs.tab	在显示整个标签时触发

$('#nav a').on('show.bs.tab',function(){
    alert('调用tab时触发！');
});

工具提示插件

工具提示就是通过鼠标移动选定在特定的元素上时，显示相关的提示语。

<a href="#" data-toggle="tooltip" title="超文本标识符">HMTL5</a>

//javascript部分需要声明
<script type="text/javascript">
    $('a').tooltip();
</script>

效果图如下：

工具提示插件有很多属性来配置提示的显示：

//工具提示渐入渐出
//允许提示内容格式为HTML
//出现的位置会自行调整到合适的位置
//延迟100ms触发
//click触发，默认focus和hover
//更改提示框的HTML提示语的模板为"123"
<a href="#" data-toggle="tooltip" title="<b>超文本标识符</b>" 
        data-animation="false"
        data-html="true"
        data-placement="auto"
        data-delay="100"
        data-trigger="click"
        data-template="123"
        >HTML5</a>

Javascript方式直接去掉前面的data即可。包括:animation、html、placement、selector、original-title、title、trigger、delay、container和template等属性。

$('button').tooltip({
    delay:{
        show:100,
        hide:100
    },
    trigger:'click'
});

关于：container 和 selector

selector是选择不同的对象，使其工具提示插件起作用，但是selector是作用于对象的父元素上，所以将元素放在一个容器div中即可

//只有第一个显示工具提示
<div id="selection">
    <a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符">HMTL5</a>
    <a href="#" data-toggle="tooltip" title="超文本标识符2">HMTL5</a>
</div>
//Js代码
$('a').tooltip();
$('#selection').tooltip({
    selector:'a[rel=tooltip]'
});

container：当对象并不能完全放下工具提示元素时，设置container为body即可

<div class="btn-group">
    <button class="btn btn-default" data-toggle="tooltip" title="超文本标识符">左</button>
    <button class="btn btn-default" data-toggle="tooltip" title="超文本标识符">中</button>
    <button class="btn btn-default" data-toggle="tooltip" title="超文本标识符">右</button>
</div>
//Js代码
$('button').tooltip({
    delay:{
        show:100,
        hide:100
    },
    container:'body'
});