基于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 相关文章推荐
Js 中debug方式
Feb 07 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
小程序实现列表展开收起效果
Jul 29 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 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的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python利用ansible分发处理任务
2015/08/04 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
思想品德自我鉴定
2013/10/12 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
实习护士自荐信
2014/06/21 职场文书
出纳工作检讨书
2014/10/18 职场文书
党员示范岗材料
2014/12/19 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
MySQL查询日期时间
2022/05/15 MySQL