当前位置:主页 > 网页特效 > TAB标签 >

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

发布时间:2018/07/10 来源:互联网 浏览: 关键词:bootstrap tab 加载 
基于Bootstrap以多标签页加载页面的Tabs插件 基于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文件。

<linkhref="css/bootstrap.min.css"rel="stylesheet">
<linkrel="stylesheet"href="b.tabs.css"type="text/css">
<scripttype="text/javascript"src="js/bootstrap.min.js"></script>
<!-- 插件核心脚本 -->
<scripttype="text/javascript"src="b.tabs.js">< /script>

HTML结构

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

<!-- 菜单导航,非必须,具体使用时更换为具体的管件 -->
<divclass="span2">
    <divclass="well menuSideBar"style="padding: 8px 0px;">
        <ulclass="nav nav-list"id="menuSideBar">
            <liclass="nav-header">导航菜单</li>
            <liclass="divider"></li>
            <limid="tab1"funurl="${webroot}demo/manage/tabsPage1"><atabindex="-1"href="javascript:void(0);">页面1</a></li>
            <limid="tab2"funurl="${webroot}demo/manage/tabsPage2"><atabindex="-1"href="javascript:void(0);">页面2</a></li>
            <limid="tab3"funurl="${webroot}demo/manage/tabsPage3"><atabindex="-1"href="javascript:void(0);">页面3</a></li>
        </ul>
    </div>
</div>
<!-- 标签页区域 -->
<divclass="span10"id="mainFrameTabs">
  
    <!-- Nav tabs -->
    <ulclass="nav nav-tabs"role="tablist">
        <!-- 设置默认的首页标签页,设置noclose样式,则不会被关闭 -->
        <lirole="presentation"class="active noclose"><ahref="#bTabs_navTabsMainPage"data-toggle="tab">首页</a></li>
    </ul>
      
    <!-- Tab panes -->
    <divclass="tab-content">
        <!-- 默认标签页(首页)的内容区域 -->
        <divclass="tab-pane active"id="bTabs_navTabsMainPage">
            <divclass="page-header">
                <h2style="font-size: 31.5px;text-align: center;font-weight: normal;">欢迎使用</h2>
            </div>
            <divstyle="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();
    varli = $(this).closest('li');
    varmenuId = $(li).attr('mid');
    varurl = $(li).attr('funurl');
    vartitle = $(this).text();
    //校验登录是否超时,通常使用ajax访问服务端测试登录是否超时
    //若页面端已有超时自动跳转的处理,则不需要设置该回调
    varcheckLogin =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

共有人阅读,期待你的评论!评论
Top