一.标签页
标签页也就是通常所说的选项卡功能。
//基本用法
...
...
...
...
//可以设置淡入淡出效果 fade,而 in 表示首选的内容默认显示
//也可以换成胶囊式
//事件,其他雷同
$('#nav a').on('show.bs.tab', function () {
alert('调用 tab 时触发!');
});
$('#nav a').on('shown.bs.tab', function () {
alert('显示完 tab 时触发!');
});
二.工具提示
工具提示就是通过鼠标移动选定在特定的元素上时,显示相关的提示语。
//基本实例
HTML5
//JS 部分需要声明
$('#section').tooltip();
工具提示有很多属性来配置提示的显示,具体如下:
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 中事件有四种。
//事件,其他雷同
$('#select a').on('show.bs.tooltip', function () {
alert('调用 show 时触发!');
});
文章名称:Bootstrap标签页和工具提示插件
文章路径:http://cdweb.net/article/jspedo.html