Bootstrap标签页和工具提示插件

雨点打透心脏的1/2处 2022-06-12 06:21 180阅读 0赞

## 标签页插件 ##

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

//也可以换成胶囊式
    //<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>

效果图如下：  
![效果图][SouthEast]

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

<table> 
 <thead> 
  <tr> 
   <th>事件类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>show.bs.tab</td> 
   <td>在调用tab方法时触发</td> 
  </tr> 
  <tr> 
   <td>shown.bs.tab</td> 
   <td>在显示整个标签时触发</td> 
  </tr> 
 </tbody> 
</table>

$('#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>

效果图如下：  
![SouthEast 1][]

工具提示插件有很多属性来配置提示的显示：  
![SouthEast 2][]

//工具提示渐入渐出
    //允许提示内容格式为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'
    });

[SouthEast]: /images/20220612/e94e609694104770ba86de7e08210e7a.png
[SouthEast 1]: /images/20220612/ba90ab6319e5453b8c9fc5b7afe5484b.png
[SouthEast 2]: /images/20220612/7e4f4c4b9d7a4bcb827d7f77af0030a9.png