以多标签页载入页面的功能插件,可让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); } });