bTabs - 多标签页Tabs插件

PetitQ Tab选项卡 2018-10-25 2.39K 0 0

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 文件。

<link href="css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="b.tabs.css" type="text/css">

<script type="text/javascript" src="js/bootstrap.min.js"></script>

```

```

<script type="text/javascript" src="b.tabs.js" >< /script>

HTML 结构：

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

<!-- 菜单导航，非必须，具体使用时更换为具体的管件 -->

```
<div class="span2">
```

    <div class="well menuSideBar" style="padding: 8px 0px;">

        <ul class="nav nav-list" id="menuSideBar">

            <li class="nav-header">导航菜单</li>

```
            <li class="divider"></li>
```

            <li mid="tab1" funurl="${webroot}demo/manage/tabsPage1"><a tabindex="-1" href="javascript:void(0);">页面1</a></li>

            <li mid="tab2" funurl="${webroot}demo/manage/tabsPage2"><a tabindex="-1" href="javascript:void(0);">页面2</a></li>

            <li mid="tab3" funurl="${webroot}demo/manage/tabsPage3"><a tabindex="-1" href="javascript:void(0);">页面3</a></li>

```
        </ul>
```
```
    </div>
```
```
</div>
```
```

```
```
<div class="span10" id="mainFrameTabs">
```
```
 
```
```
    
```

    <ul class="nav nav-tabs" role="tablist">

        <!-- 设置默认的首页标签页，设置noclose样式，则不会被关闭 -->

        <li role="presentation" class="active noclose"><a href="#bTabs_navTabsMainPage" data-toggle="tab">首页</a></li>

```
    </ul>
```
```
 
```
```
    
```
```
    <div class="tab-content">
```

        <!-- 默认标签页（首页）的内容区域 -->

        <div class="tab-pane active" id="bTabs_navTabsMainPage">

```
            <div class="page-header">
```

                <h2 style="font-size: 31.5px;text-align: center;font-weight: normal;">欢迎使用</h2>

```
            </div>
```

            <div style="text-align: center;font-size: 20px;line-height: 20px;">

            Welcome to use bTabs plugin!

```
            </div>
```
```
        </div>
```
```
    </div>
```
```
 
```
```
</div>
```

初始化插件：

使用 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 插件的更多使用方法请参考：

bTabs 插件主页：https://terryz.github.io/btabs/index.html

bTabs 插件文档：https://terryz.github.io/btabs/docs.html

bTabs - 多标签页 Tabs 插件

已有 599 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

Tab选项卡

bTabs - 多标签页Tabs插件

使用方法：

HTML 结构：

初始化插件：

bTabs - 多标签页 Tabs 插件

相关文章

jQuery + CSS3堆叠式Tab选项卡

Material Design风格滑动选项卡特效

jquery + CSS3 Tabs选项卡

发表回复取消回复

热销模板

Tab选项卡

使用方法：

HTML 结构：

初始化插件：

bTabs - 多标签页 Tabs 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复