宜宾网站建设公司

Bootstrap标签页和工具提示插件

一．标签页
标签页也就是通常所说的选项卡功能。
//基本用法





...


...


...


...




//可以设置淡入淡出效果 fade，而 in 表示首选的内容默认显示



//也可以换成胶囊式

    

//data-target
使用 data-target 绑定或不绑定效果都是一样的

//使用 JavaScript，直接使用 tab 方法。
$('#nav a').on('click', function (e) { e.preventDefault();
$(this).tab('show');

});
Bootstrap 标签页和工具提示插件

成都创新互联公司 - 珉田数据中心，四川服务器租用，成都服务器租用，四川网通托管,绵阳服务器托管，德阳服务器托管，遂宁服务器托管，绵阳服务器托管，四川云主机，成都云主机，西南云主机，珉田数据中心，西南服务器托管，四川/成都大带宽，机柜大带宽、租用·托管，四川老牌ＩＤＣ服务商

//事件，其他雷同
$('#nav a').on('show.bs.tab', function () {
alert('调用 tab 时触发！');
});

$('#nav a').on('shown.bs.tab', function () {
alert('显示完 tab 时触发！');
});

二．工具提示
工具提示就是通过鼠标移动选定在特定的元素上时，显示相关的提示语。
//基本实例
HTML5

//JS 部分需要声明
$('#section').tooltip();

工具提示有很多属性来配置提示的显示，具体如下：
Bootstrap 标签页和工具提示插件

HTML5

JavaScript 方式直接去掉前面的 data 即可。包括：animation、html、placement、
selector、original-title、title、trigger、delay、container 和 template 等属性。
//JavaScript 方式
$('#section a').tooltip({ delay : {
show : 500,
hide : 100,

});

},
container : 'body'

JavaScript 有四个方法：show、hide、toggle 和 destroy 四种。
//显示
$('#section a').tooltip('show');
//隐藏
$('#section a').tooltip('hide');
//反转显示和隐藏
$('#section a').tooltip('toggle');
//隐藏并销毁
$('#section a').tooltip('destroy');

Tooltip 中事件有四种。
Bootstrap 标签页和工具提示插件

//事件，其他雷同
$('#select a').on('show.bs.tooltip', function () {
alert('调用 show 时触发！');
});

分享文章：Bootstrap标签页和工具提示插件
分享URL：http://ybzwz.com/article/jspedo.html

其他资讯