bootstrap标签页和工具提示插件
来源:互联网 发布:java基础免费教程视频 编辑:程序博客网 时间:2024/05/16 15:21
标签页也就是通常所说的选项卡功能。
//基本用法
<ul class="nav nav-tabs"> <li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li> <li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li> <li><a href="#jquery" data-toggle="tab">jQuery</a></li> <li><a href="#extjs" data-toggle="tab">ExtJS</a></li></ul><div class="tab-content" style="padding: 10px;"> <div class="tab-pane active" id="html5">...</div> <div class="tab-pane" id="bootstrap">...</div> <div class="tab-pane" id="jquery">...</div> <div class="tab-pane" id="extjs">...</div></div>//可以设置淡入淡出效果fade,而in 表示首选的内容默认显示
<div class="tab-pane fade in active" id="html5">
//也可以换成胶囊式
<ul class="nav nav-pills">
//data-target
使用data-target 绑定或不绑定效果都是一样的
//使用JavaScript,直接使用tab 方法。
$('#nav a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
//事件,其他雷同
$('#nav a').on('show.bs.tab', function () {
alert('调用tab 时触发!');
});
$('#nav a').on('shown.bs.tab', function () {
alert('显示完tab 时触发!');
});
二.工具提示
工具提示就是通过鼠标移动选定在特定的元素上时,显示相关的提示语。
//基本实例
<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
//JS 部分需要声明
$('#section').tooltip();
工具提示有很多属性来配置提示的显示,具体如下:
<a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符" data-animation="false" data-html="true" data-placement="auto" data-selector="a[rel=tooltip]" data-trigger="click" data-delay="500" data-template="<b>123</b>">HTML5</a>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');
//事件,其他雷同
$('#select a').on('show.bs.tooltip', function () {
alert('调用show 时触发!');
});
- Bootstrap标签页和工具提示插件
- bootstrap标签页和工具提示插件
- Bootstrap 提示工具和弹出框(Popover)插件
- Bootstrap标签页插件
- Bootstrap 标签页插件
- Bootstrap 提示工具(Tooltip)插件
- Bootstrap 提示工具(Tooltip)插件
- Bootstrap 提示工具(Tooltip)插件
- 【bootstrap教程】Bootstrap 工具提示(Tooltip)插件
- 4.5Bootstrap学习js插件篇之工具提示
- Bootstrap的js插件之工具提示(tooltip)
- 4.5Bootstrap学习js插件篇之工具提示
- sublime bootstrap提示插件
- Bootstrap 标签页(Tab)插件
- Bootstrap 标签页(Tab)插件
- Bootstrap 标签页(Tab)插件
- Bootstrap 标签页(Tab)插件
- Bootstrap工具提示框
- kruskal算法
- 为什么文章要审核啊?
- Lua UTF-8 全角转半角
- 数据结构面试题/判断一棵树是否是完全二叉树
- JSON格式转为JSON对象的方式
- bootstrap标签页和工具提示插件
- 自制编程语言CXScript(三) 如何实现if语句、else语句并实现分支跳转
- 京东三级列表页持续架构优化—前端优化实践
- UVA 1584
- 运行yum时出现/var/run/yum.pid已被锁定,PID为xxxx的另一个程序正在运行的问题解决
- 音视频 图像处理
- 【问题集】window.open使用被拦截问题
- POJ 3221:Diamond Puzzle(六数码 反向bfs)
- CSS 关闭按钮实现