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 相关文章推荐
javascript内置对象操作详解
Feb 04 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
PDO::getAttribute讲解
2019/01/28 PHP
用javascript实现自定义标签
2007/05/08 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
python 循环数据赋值实例
2019/12/02 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
Python实现汇率转换操作
2020/05/03 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
python代码实现图书管理系统
2020/11/30 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
PHP笔试题
2012/02/22 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
建筑工程自我鉴定
2013/10/18 职场文书
领导证婚人证婚词
2014/01/13 职场文书
高中生的自我评价
2014/03/04 职场文书
《锄禾》教学反思
2014/04/08 职场文书
啤酒节策划方案
2014/05/28 职场文书
离婚协议书范本2014
2014/10/27 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
地心历险记观后感
2015/06/15 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js