jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明


Posted in Javascript onJune 27, 2011

作者: think8848(公司主页: http://www.cleversoft.com, QQ: 166156888, Blog: http://think8848.cnblogs.com)  转载请保留此信息


CleverTabs是一款jQuery插件,所需jQuery版本:1.6.1,jQuery UI样式版本:1.8.13;其功能为创建jQuery UI风格的Tab用于显示iframe。

本示例中符加了jQuery.contextMenu插件,我修改了其样式,使用了jQuery UI的皮肤

效果如下图:

jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
初级应用示例:
HTML代码:
<div id="tabs"><ul></ul></div>
Javascript代码:

<script type="text/javascript"> 
$(function () { 
tabs = $('#tabs').cleverTabs(); 
tabs.add({ 
url: 'https://3water.com', 
label: 'think8848' 
}); 
}); 
</script>

CleverTabs详细说明:
CleverTabs为所有Tab的容器
var tabs; 
<script type="text/javascript"> 
$(function () { 
tabs = $('#tabs').cleverTabs({ 
//是否安装右键菜单(默认: true) 
setupContextMenu: true, 
//右键菜单定义, 右键菜单功能由jquery.contextMenu插件提供 
//详见: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/ 
//本插件中对原contextMenu插件中的样式做了修改,使用了jQuery UI皮肤 
contextMenu: { 
element: $('#contextMenuElementId'), 
handler: function (action, el, pos) { /*do something...*/ } 
}, 
//开启Tab后是否锁定(不允许关闭,默认: false) 
lock: false, 
//开启Tab后是否禁用(不允许激活和操作iframe内容,默认: false) 
disable: false, 
//当tabs中只有一个Tab时,是否锁定该Tab(默认: true) 
lockOnlyOne: true, 
//显示iframe的容器(默认创建在tabs元素中) 
panelContainer: $('#panelContainerElementId')/*, 
其中 
tabHeaderTemplate: '', //(Tab用于控制的头模板) 
tabPanelTemplate: '', //(Tab用于显示的Panel模板) 
uidGenerator: function() {} //(Tab唯一id生成器) 
功能现在不启用,等有时间完善后再启用*/ 
}); 
tabs.add({ 
url: 'https://3water.com', 
label: 'think8848' 
}); 
}); 
</script>

CleverTabs.add方法:添加一个新的Tab并使之成为激活状态,如果将要添加的url已经存在,则会激活该Tab
<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
tabs.add({ 
//必须是在tabs内唯一的id 
id: 'uniqueId', 
//将要在iframe的src属性设置的值 
url: 'iframe.src', 
//显示在Tab头上的文字 
label: 'tab header', 
//关闭本Tab时需要刷新的Tab的url(默认: null) 
closeREfresh: 'tab url', 
//关闭本Tab时需要激活的Tab的url(默认: null) 
closeActivate: 'tab url', 
//关闭本Tab时需要执行的回调函数 
callback: function () { /*do something*/ } 
}); 
</script>

CleverTabs.getCurrentTab方法:
获取当前处于激活状态的Tab
<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getCurrentTab(); 
</script>

CleverTabs.getTabByUrl方法:
获取指定url的Tab实例
<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl('https://3water.com'); 
</script>

CleverTabs.clear方法:
关闭tabs内所有未锁定的Tab
<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.clear(); 
</script>

CleverTab.deactivate方法:
使Tab页面处于未激活状态,但不建议在代码中使用
CleverTab.prevTab方法:
获取该Tab之前的Tab
<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl('https://3water.com'); 
var prevTab = tab.prevTab(); 
</script>

CleverTab.nextTab方法:
获取该Tab之后的Tab
<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl('https://3water.com'); 
var prevTab = tab.nextTab(); 
</script>

CleverTab.kill方法:
从tabs中移移该Tab
<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl('https://3water.com'); 
tab.kill(); 
</script>

CleverTab.refresh方法:
刷新该Tab的iframe中的内容
<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl('https://3water.com'); 
tab.refresh(); 
</script>

CleverTab.setDisable方法:
设置该Tab的disabled属性,设置disabled为true后,自动设置该Tab的locked属性为true
<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl('https://3water.com'); 
//参数true为禁用,false或不提供值为启用 
tab.setDisable(true); 
</script>

CleverTab.setLock方法:
设置该Tab的locked属性,设置locked为true后,该Tab的不允许关闭
<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl('https://3water.com'); 
//参数true为锁定,false或不提供值为解锁 
tab.setLock(true); 
</script>

------------------------------2011.06.27 更新---------------------------------
"改变不了别人,就改变自已吧"
在现在的页面中,多数情况下都可能由几部分组成,比如:Banner,Navigator,Content等,而为了工作区域变的更大,很多时候诸如Banner,Navigator或者其他的Panel都会收起来(Collapse),这个时候问题来了,当初我给tabs定义了width: 80%; height: 90%; 现在tabs的width和height发生了变化,可是内部的Tab页面还没有收到这个变化,它还是按照之前的size显示呢,更要命的是resize事件居然只有window和body才有,div居然不支持此事件!真不知道他们是怎么想的...在之前的cleverTabs中,我绑定了window.resize事件,但是问题在于我上面举的例子中,window的size实际上没有发生变化,甚至body也没有,但是tabs的大小发生变化了,在这种情况下,如果您使用了默认的tabPenelContainer,那一定得处理tabs的resize事件,可是tabs就是一个div嘛,哪来的resize?昨晚在睡前突然想到个办法,既然能"改变不了别人,就改变自已",那么就能"自已处理不了的事,就交给别人去处理吧"。把resize“外包”出去算了。于是对原来的代码做了修改,在CleverTabs构造函数中,为CleverTabs的prototype添加了resizePanelContainer函数,tabs自已不知道发生了resize事件,但总归有人知道发生了,谁知道谁调用,所谓的能者多劳?
CleverTabs.resizePanelContainer方法:
当使用CleverTabs默认的PanelContainer时,重新设置PanelContainer的size。
<script type="text/javascript"> 
var tabs; 
$(function () { 
tabs = $('#tabs').cleverTabs(); 
$(window).bind('resize', function () { 
//当发生window.resize事件时,重新默认的tabs的PanelContainer的大小 
tabs.resizePanelContainer(); 
}); 
</script>

演示 http://demo.3water.com/js/2011/CleverTabs/index.htm
源码下载  /201106/yuanma/CleverTabs.rar
Javascript 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
关于js类的定义
Jun 28 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
jQuery is()函数用法3例
May 06 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 #Javascript
读jQuery之十 事件模块概述
Jun 27 #Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 #Javascript
jQuery表格行换色的三种实现方法
Jun 27 #Javascript
19个很有用的 JavaScript库推荐
Jun 27 #Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 #Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 #Javascript
You might like
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
用Flash图形化数据(一)
2006/10/09 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
python ip正则式
2009/05/07 Python
python字符串对其居中显示的方法
2015/07/11 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
python学习基础之循环import及import过程
2018/04/22 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python实现多线程的两种方式分析
2018/08/29 Python
python实现最大优先队列
2019/08/29 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
python两个list[]相加的实现方法
2020/09/23 Python
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
求职信的正确写法
2014/07/10 职场文书
党校党性分析材料
2014/12/19 职场文书
重阳节简报
2015/07/20 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers