使用Jquery插件bTabs实现多页签打开效果

使用Jquery插件bTabs实现多页签打开效果

官网地址:点击这里进入官网

资源导入

<link rel="stylesheet" href="b.tabs.css" type="text/css">
<!-- 插件核心脚本 -->
<script type="text/javascript" src="b.tabs.js" ></script>
<!-- 插件拖动效果脚本 -->
<script type="text/javascrpt"  src="jquery-ui.min.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);
    }
});

官方使用效果

使用Jquery插件bTabs实现多页签打开效果

使用Jquery插件bTabs实现多页签打开效果

上一篇:投篮篮球儿轨迹MATLAB仿真


下一篇:HRBU_20211112训练