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一些题目的解析
Dec 25 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
javascript继承机制实例详解
Nov 20 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
vue如何搭建多页面多系统应用
Jun 17 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全排列递归算法代码
2012/10/09 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PDO::exec讲解
2019/01/28 PHP
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
详解Python中DOM方法的动态性
2015/04/11 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
民族团结先进个人事迹材料
2014/06/02 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
民间借贷被告代理词
2015/05/23 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书