bootstrap-tab基于bootstrap开发，在其原bootstrap-tab的基础上进行了扩展和修改，使其能支持ajax请求页面、动态添加删除tab。
目前只提供通过js构建tab的方法:
<script src="js/bootstrap-tab.js"></script> $('#myTab').bootstrapTab({
onAll:function(){
console.info('All event will trigger this.');
},
tabs: [
{
id: 'home',
title: '主界面',
remote: 'content1.html',
active: true
},
{
id: 'info',
title: '个人信息',
remote: 'content2.html'
},
{
id: 'user',
title: 'zxc',
target:'#divContent'
}
]
});
方法列表 jQuery.fn.bootstrapTab.methods
| 方法名 | 参数 | 描述 | 例子 |
|---|---|---|---|
| getOptions | 获取全局配置 | ||
| close | id:选项卡标识 | 关闭选项卡 | |
| select | id:选项卡标识 | 选中选项卡 | |
| getSelection | 获取当前被选中的选项卡数据 | ||
| push | option:选项卡参数 | 插入选项卡 |
事件列表 jQuery.fn.bootstrapTab.events
| Option 事件 | jQuery 事件 | 参数列表 | 描述 |
|---|---|---|---|
| onAll | all.bs.tab | name:事件名 args:事件的参数 |
所有事件均会触发该事件 |
| onSelect | select.bs.tab | id:选项卡id data:选项卡数据 target:选项卡导航的jquery对象 |
选中选项卡后触发 |
| onLoaded | loaded.bs.tab | id:选项卡id data:选项卡数据 target:选项卡导航的jquery对象 |
为选项卡加载好panel后触发 |
| onClose | close.bs.tab | id:选项卡id data:选项卡数据 |
选项卡被移除后触发 |
| onCreate | create.bs.tab | option:选项卡配置 created:选项卡导航的jquery对象 |
渲染一个选项卡后触发 |
| onPush | push.bs.tab | option:选项卡配置 pushed:选项卡导航的jquery对象 |
通过js添加选项卡后触发 |
选项卡参数 jQuery.fn.bootstrapTab.defaults
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
| classes | String | nav nav-tabs | 选项卡导航栏样式，可选'nav nav-pills'，可根据用户需求定制 |
| tabContentClasses | String | tab-content | 选项卡面板容器样式 |
| tabPanelClass | String | tab-pane | 选项卡面板样式 |
| activeClass | String | active | 选项卡激活时的样式，可根据用户需求定制 |
| lazyLoad | Boolean | true | 远程数据是否启用懒加载模式 |
| tabs | Array | [] | 选项卡数据 |
选项卡参数 jQuery.fn.bootstrapTab.tabInstance
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
| id | String | undefined | 选项卡唯一标识 |
| title | String | undefined | 选项卡名称 |
| remote | String | undefined | 远程html的url,远程数据优先,可在连接后追加jquery选择器 |
| target | String | undefined | 本地html选择器,使用jquery选择器 |
| active | Booelan | false | 在初始化时是否激活 |
| closeable | Booelan | true | 能否被关闭,设置为true时会在该选项卡导航按钮上出现'x' |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent