基于Bootstrap的标签页组件及bootstrap-tab使用说明


Posted in Javascript onJuly 25, 2017

bootstrap-tab

基于Bootstrap的标签页组件及bootstrap-tab使用说明

bootstrap-tab组件是对原生的bootstrap-tab组件的封装,方便开发者更方便地使用,主要包含以下功能:

tab页初始化
关闭tab页
新增tab
显示tab页
获取tab页ID

使用

Step1 :引入样式

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" rel="external nofollow" >
<!--bootstrap-tab样式-->
<link rel="stylesheet" href="../css/bootstrap-tab.css" rel="external nofollow" >

Step2:引入脚本

<script src="jquery/jquery-1.8.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="../js/bootstrap-tab.js"></script>

Step3:使用

<div id="tabContainer"></div>
<script>
 $("#tabContainer").tabs({
 data: [{
  id: 'home',
  text: '百度一下',
  url: "tab_first.html",
  closeable: true
 }, {
  id: 'admineap',
  text: 'AdminEAP',
  url: "tab_second.html"
 }, {
  id: 'edit',
  text: '编辑人员',
  url: "tab_content.html",
  closeable: true
 }],
 showIndex: 1,
 loadAll: false
 })
 $("#tabContainer").data("tabs").addTab({id: 'test', text: 'addTab', closeable: true, url: 'tab_content.html'})
</script>

参数和方法说明

参数说明

参数名称 默认值 可选值 说明
data tab页数据来源(对象列表),包含id,text,url,closeable属性
id 必须,单个tab的id
text 必须,单个tab页的标题
url 必须,单个tab页的内容url
closeable false true,false 单个tab页是否可关闭
showIndex 0 默认显示页的索引
loadAll true true,false true=一次全部加在页面,false=只加在showIndex指定的页面,其他点击时加载,提高响应速度

方法说明

方法名称 参数 参数说明 方法说明
init tab组件初始化入口方法
builder data tab数据 构建tab页的主方法
loadData 加载tab页的内容,根据loadAll即时加载或者点击时加载
addTab obj 单个tab的数据 增加一个tab页
showTab tabId tab的id 根据id显示tab页
getCurrentTabId 获取当前活动tab页的ID

相关链接

bootstrap-tab的Github地址:https://github.com/bill1012/bootstrap-pager

总结

以上所述是小编给大家介绍的基于Bootstrap的标签页组件及bootstrap-tab使用说明,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
vuex存值与取值的实例
Nov 06 Javascript
vue项目实现分页效果
Mar 24 Vue.js
js事件委托和事件代理案例分享
Jul 25 #Javascript
基于JavaScript实现多级菜单效果
Jul 25 #Javascript
简单谈谈React中的路由系统
Jul 25 #Javascript
老生常谈js中的MVC
Jul 25 #Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 #Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 #Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 #Javascript
You might like
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
php阳历转农历优化版
2016/08/08 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
PyTorch-GPU加速实例
2020/06/23 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
个性大学生自我评价
2013/12/04 职场文书
高中毕业生自我鉴定例文
2013/12/29 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
跑操口号
2014/06/12 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技