伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:媒体,UI-Tabs,标签
 13061  70  查看评论 (9)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容8

bTabs

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

使用介绍

资源导入 在网页上引用css样式、js脚本等文件<link rel="stylesheet" href="b.tabs.css" type="text/css"> <!-- 伟德BETVICTOR核心脚本 --> <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="http://yzshield.com/quot;#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初始化伟德BETVICTOR代码//导航区域项目点击增加标签页处理 //仅演示功能 $('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); });   //伟德BETVICTOR的初始化 $('#mainFrameTabs').bTabs({     //登录界面URL,用于登录超时后的跳转     'loginUrl' : 'http://xxx.com/login',     //用于初始化主框架的宽度高度等,另外会在窗口尺寸发生改变的时候,也自动进行调整     'resize' : function(){         //这里只是个样例,具体的情况需要计算         $('#mainFrameTabs').height(100);     } });
相关伟德BETVICTOR-Tabs,标签

可打开可关闭的选项卡,单纯无污染,改改样式就能用

可打开可关闭的选项卡,单纯无污染,改改样式就能用
  Tabs
 11506  44

适合手机、pad等移动终端的tab响应式切换效果

适合手机、pad等移动终端的tab响应式切换效果
  Tabs
 26408  176

超级好看的格子选项卡

超级好看的格子选项卡
  Tabs
 16973  237

移动可滑动切换tab选项卡

移动端头部任意多个滑动切换
  Tabs
 13026  113

讨论这个项目(9)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    南渊 0
    2018/4/21 10:55:48
    怎么解决f5刷新初始到首页的问题? 回复
    一只特例独行的猪 0
    2018/3/16 14:02:17
    为啥在IE11中的tab标签的X会换行 回复
    安之若素 0
    2018/2/26 15:42:16
    能优化这个吗?
    回复
    周明润 0
    2017/12/5 11:53:13
    你好,我在公司项目上引用了你这个,需要点改善,能方便交流吗
        Terry0
        2017/12/10 0:47:21
        要做什么改善?不过如果有什么需求,可以在源码基础上,自行修改下
        周明润0
        2017/12/13 13:34:41
        哦哦,
        周明润0
        2018/1/22 15:53:50
        右击tab标签怎么关闭其他或者当前tab,这个功能可以实现吗
    回复
    zqlkk 0
    2017/9/11 15:43:34
    动态生成的页签点击无效,要怎么解决
        Terry0
        2017/9/11 17:16:00
        关注下控制台,你的脚本可能报错了
    回复
取消回复