素材牛VIP会员

jQuery多标签页插件bTabs

 所属分类:网页特效-选项卡/滑动门

 浏览:1926次  评论:0次  更新时间:2017-08-02
牛币素材VIP可免积分下载
jQuery多标签页插件bTabs
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:以多标签页载入页面的功能插件bTabs,可让Bootstrap的UI界面变成类似EXT,EasyUI之类的操作模式
 标签:载入多标签

详细介绍

以多标签页载入页面的功能插件,可让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);">页面1a>li>
            <li mid="tab2" funurl="${webroot}demo/manage/tabsPage2"><a tabindex="-1" href="javascript:void(0);">页面2a>li>
            <li mid="tab3" funurl="${webroot}demo/manage/tabsPage3"><a tabindex="-1" href="javascript:void(0);">页面3a>li>
        ul>
    div>
div>

<div class="span10" id="mainFrameTabs">
  
    
    <ul class="nav nav-tabs" role="tablist">
        
        <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>

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);
    }
});

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)