使用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插件CleverTabs实现多页签打开效果
在VS中,我们能打开多页签,并在不同的页签之间进行浏览和操作,这一功能通过JQuery插件CleverTabs也能实现此效果.CleverTabs下载请点击这里:JQuery CleverTabs 本 ...
Jquery UI Tabs 动态添加页签，并跳转到新页签
需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添加页签(添加多个) 2.tabs动态添加页签后,需要跳转到新添加的页签查找tabs api以及tabs的源码后,发现tabs没有直接实 ...
不得不爱开源 Wijmo jQuery 插件集（4）-【手风琴效果】(附页面展示和源码)
园子中的朋友大家好.在上一篇文章中我们,给大家介绍了 Wijmo Menu 的特性及使用方法.感谢园子中朋友的支持,朋友们的支持给我们写这一系列文章提供了很大的动力.在这篇文章中我们将介绍 Accor ...
html5 滚屏效果插件,jQuery插件fullPage.js实现全屏滚动效果
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示的HTML 布局以及js 代码 //需要连接连接的三个文件 //css文件 / ...
html如何实现切换效果,纯CSS实现页签切换效果
主要运用了 CSS3 的 :checked 选择器, 代码结构跟使用js差不多,只是多了几个radio, 不知道性能上是js快还是css快呢? CSS3 TAB body { font-family: ...
纯CSS实现页签切换效果
主要运用了 CSS3 的 :checked 选择器, 代码结构跟使用js差不多,只是多了几个radio, 不知道性能上是js快还是css快呢? codepen地址:http://codepen.io/ ...
50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
推荐60个jQuery插件及使用教程
jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...
axure没有团队页签_Axure教程：多页签可滚动的选项卡制作
这就是我下面要分享给大家的内容啦: 首先为大家回顾传统选项卡的制作过程,再展示可滚动页签的选项卡制作过程. 一.最常见的传统选项卡最常见的选项卡,一般有三四个页签,分别对应各自页面,通过鼠标点击页签 ...

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

资源导入

HTML代码

Javascript初始化插件代码

官方使用效果

使用Jquery插件bTabs实现多页签打开效果相关推荐

最新文章

热门文章