基于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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
asp批量修改记录的代码
Jun 25 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
老生常谈的跨域处理
Jan 11 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
关于element的表单组件整理笔记
Feb 05 Javascript
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 DataGrid 实现代码
2009/08/12 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
node.js集成百度UE编辑器
2015/02/05 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
Python 命令行参数sys.argv
2008/09/06 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
使用python制作一个解压缩软件
2019/11/13 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
造价工程师个人求职信
2013/09/21 职场文书
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
社团招新策划书
2014/02/04 职场文书
计算机软件专业求职信
2014/06/10 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
运动会广播稿300字
2015/08/19 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫