基于Bootstrap的标签页组件及bootstrap-tab使用说明
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为例)
bootstrap-tab的Github地址：https://github.com/bill1012/bootstrap-pager
总结
以上所述是小编给大家介绍的基于Bootstrap的标签页组件及bootstrap-tab使用说明，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍Bootstrap标签页（Tab）插件使用方法，包括了Bootstrap标签页（Tab）插件使用方法的使用技巧和注意事项，需要的朋友参考一下 您可以通过以下两种方式启用标签页： 1、通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstra
-
主要内容：用法,淡入淡出效果,实例,方法,实例,事件,实例标签页（Tab）在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。 如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min
-
本文向大家介绍Bootstrap每天必学之标签页（Tab）插件，包括了Bootstrap每天必学之标签页（Tab）插件的使用技巧和注意事项，需要的朋友参考一下 标签页（Tab）通过结合一些 data 属性，您可以轻松地创建一个标签页界面。 "如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或
-
本文向大家介绍BootStrap按钮标签及基本样式，包括了BootStrap按钮标签及基本样式的使用技巧和注意事项，需要的朋友参考一下 按钮标签 在<a>,<button>或input元素上使用按钮class。但是为了避免跨浏览器的不一致性，建议使用<button>标签。 感觉link标签的不怎么明显，但是还是能够从边距上看出是一个button的，这里只是说明了怎样利用不同的标签来使用btncla
-
主要内容：实例,实例,标签更多实例本章将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签，如下面的实例所示： 实例 <h1>Example Heading <span class="label label-default">Label</span></h1> <h2>Example Heading <span class="label label-default
-
本文向大家介绍Bootstrap标签页（Tab）插件切换echarts不显示问题的解决，包括了Bootstrap标签页（Tab）插件切换echarts不显示问题的解决的使用技巧和注意事项，需要的朋友参考一下 问题： 1. 在echarts跟bootstrap选项卡整合的时候，默认第一个选中选项卡可以正常加载echarts图表，但是切换其他选项的时候不能渲染出其他选项卡echarts图表。 2.