jQuery多标签页插件bTabs

所属分类:媒体,UI-Tabs,标签

 4359  31  查看评论 (2)
jQuery多标签页插件bTabs ie兼容8

bTabs

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

主要特性jQuery插件支持Bootstrap2、3的UI环境以多标签页载入页面的功能插件,可让Bootstrap的UI界面变成类似EXT,EasyUI之类的操作模式多标签页之类都拥有独立的上下文,不会互相干扰快速使用皮肤浏览器支持IE8+,chrome,firefox使用入门、文档、实例

使用介绍

资源导入 在网页上引用css样式、js脚本等文件

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

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">
 
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <!-- 设置默认的首页标签页,设置noclose样式,则不会被关闭 -->
        <li role="presentation" class="active noclose"><a href="#bTabs_navTabsMainPage" data-toggle="tab">首页</a></li>
    </ul>
     
    <!-- Tab panes -->
    <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>

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);
    }
});
相关插件-Tabs,标签

jQuery产品切换tab选项卡

特别好用的tab选项卡,可以轮播多张图片,无多余代码注释全
  Tabs
 3007  30

jQuery tabs选项卡设计效果

这是一款基于bootstrap的简单jquery tabs选项卡美化效果。该tabs选项卡美观大方,使用简单,适用于多种网页场景
  Tabs
 1851  13

jQuery的Tab插件 Yetii

Yetii 是一个 jQuery 用来实现 Tab 窗体的插件,目前尚不支持 Ajax 方式获取内容
  Tabs
 21632  34

Easy Responsive Tabs to Accordion

自己的收藏,留着以后慢慢学
  Tabs
 11971  66

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币

    zqlkk 0
    2017/9/11 15:43:34

    动态生成的页签点击无效,要怎么解决

        Terry0
        2017/9/11 17:16:00

        关注下控制台,你的脚本可能报错了

    回复
取消回复