基于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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
Mootools 1.2教程 Tooltips
Sep 15 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
基于canvasJS在PHP中制作动态图表
May 30 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
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python循环结构的应用场景详解
2019/07/11 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
夜不归宿检讨书
2014/02/25 职场文书
奥利奥广告词
2014/03/20 职场文书
个人委托函范文
2015/01/29 职场文书
诉讼和解协议书
2016/03/23 职场文书
市场营销计划书
2019/04/24 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
给numpy.array增加维度的超简单方法
2021/06/02 Python
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS