标签页 插件 html,基于Bootstrap以多标签页加载页面的Tabs插件

bTabs是一款以多标签页加载页面的jquery Tabs插件。bTabs可以方便的和bootstrap2和bootstrap3集成使用，通过简单配置即可让页面变为Ext、EasyUI之类多标签页模式，丰富业务展示模式。

bTabs插件的特点有：

支持Bootstrap2、3的UI环境。

以多标签页载入页面的功能插件，可让Bootstrap的UI界面变成类似EXT，EasyUI之类的操作模式。

多标签页之类都拥有独立的上下文，不会互相干扰。

标签之间通过拖拽快速排列顺序。

快速使用皮肤。在需要使用不同样式的皮肤时，只需要定义好皮肤的样式内容，插件可在初始化时，设置指定的皮肤名称

严格遵守Bootstrap Tabs的HTML代码结构，可自动适应所有基于Bootstrap的皮肤样式。

支持IE8+，chrome，firefox等主流浏览器。

bTabs插件的主要使用场景有：

需要将页面操作模式改造成使用标签页来载入页面的场景，例如后端管理平台的基础UI框架。

数据内容较多，不同分类数据需要以多个标签页来展示，而这些分类的内容都有独立页面的场景，例如人员详细信息，车辆详细信息等。

使用方法

在页面中引入bootstrap相关文件，以及b.tabs.css和b.tabs.js文件。

HTML结构

使用bTabs插件的基本HTML结构如下：

导航菜单

页面1

页面2

页面3

首页

欢迎使用

Welcome to use bTabs plugin!

初始化插件

使用bTabs插件的Javascript初始化插件代码如下：

//导航区域项目点击增加标签页处理

//仅演示功能

$('a',$('#menuSideBar')).on('click', function(e) {

e.stopPropagation();

var li = $(this).closest('li');

var menuId = $(li).attr('mid');

var url = $(li).attr('funurl');

var title = $(this).text();

//校验登录是否超时，通常使用ajax访问服务端测试登录是否超时

//若页面端已有超时自动跳转的处理，则不需要设置该回调

var checkLogin = function(){

....

};

$('#mainFrameTabs').bTabsAdd(menuId,title,url,checkLogin);

});

//插件的初始化

$('#mainFrameTabs').bTabs({

//登录界面URL，用于登录超时后的跳转

'loginUrl' : 'http://xxx.com/login',

//用于初始化主框架的宽度高度等，另外会在窗口尺寸发生改变的时候，也自动进行调整

'resize' : function(){

//这里只是个样例，具体的情况需要计算

$('#mainFrameTabs').height(100);

}

});

关于bTabs插件的更多使用方法请参考：