为EasyUI的Tab标签添加右键菜单的方法


Posted in Javascript onJuly 14, 2012

前期的准备工作:
1、下载DEMO源码,并升级为最新版本(jquery 1.7.2,Easyui 1.2.6),直接替换就可以啦,升级easyui 是的要把css js theme 全部替换
2、在首页的HTML代码中:将

<div id="mm" class="easyui-menu" style="width:150px;"> 
<div id="mm-tabupdate">刷新</div> 
<div class="menu-sep"></div> 
<div id="mm-tabclose">关闭</div> 
<div id="mm-tabcloseall">全部关闭</div> 
<div id="mm-tabcloseother">除此之外全部关闭</div> 
<div class="menu-sep"></div> 
<div id="mm-tabcloseright">当前页右侧全部关闭</div> 
<div id="mm-tabcloseleft">当前页左侧全部关闭</div> 
<div class="menu-sep"></div> 
<div id="mm-exit">退出</div> 
</div>

改为:
<div id="mm" class="easyui-menu" style="width:150px;"> 
<div id="refresh">刷新</div> 
<div class="menu-sep"></div> 
<div id="close">关闭</div> 
<div id="closeall">全部关闭</div> 
<div id="closeother">除此之外全部关闭</div> 
<div class="menu-sep"></div> 
<div id="closeright">当前页右侧全部关闭</div> 
<div id="closeleft">当前页左侧全部关闭</div> 
<div class="menu-sep"></div> 
<div id="exit">退出</div> 
</div>

outlook2.js 中添加新方法如下:
function closeTab(action) 
{ 
var alltabs = $('#tabs').tabs('tabs'); 
var currentTab =$('#tabs').tabs('getSelected'); 
var allTabtitle = []; 
$.each(alltabs,function(i,n){ 
allTabtitle.push($(n).panel('options').title); 
}) 
switch (action) { 
case "refresh": 
var iframe = $(currentTab.panel('options').content); 
var src = iframe.attr('src'); 
$('#tabs').tabs('update', { 
tab: currentTab, 
options: { 
content: createFrame(src) 
} 
}) 
break; 
case "close": 
var currtab_title = currentTab.panel('options').title; 
$('#tabs').tabs('close', currtab_title); 
break; 
case "closeall": 
$.each(allTabtitle, function (i, n) { 
if (n != onlyOpenTitle){ 
$('#tabs').tabs('close', n); 
} 
}); 
break; 
case "closeother": 
var currtab_title = currentTab.panel('options').title; 
$.each(allTabtitle, function (i, n) { 
if (n != currtab_title && n != onlyOpenTitle) 
{ 
$('#tabs').tabs('close', n); 
} 
}); 
break; 
case "closeright": 
var tabIndex = $('#tabs').tabs('getTabIndex', currentTab); 
if (tabIndex == alltabs.length - 1){ 
alert('亲,后边没有啦 ^@^!!'); 
return false; 
} 
$.each(allTabtitle, function (i, n) { 
if (i > tabIndex) { 
if (n != onlyOpenTitle){ 
$('#tabs').tabs('close', n); 
} 
} 
}); 
break; 
case "closeleft": 
var tabIndex = $('#tabs').tabs('getTabIndex', currentTab); 
if (tabIndex == 1) { 
alert('亲,前边那个上头有人,咱惹不起哦。 ^@^!!'); 
return false; 
} 
$.each(allTabtitle, function (i, n) { 
if (i < tabIndex) { 
if (n != onlyOpenTitle){ 
$('#tabs').tabs('close', n); 
} 
} 
}); 
break; 
case "exit": 
$('#closeMenu').menu('hide'); 
break; 
} 
}

将js中tabCloseEven 方法 改为
function tabCloseEven() { 
$('#mm').menu({ 
onClick: function (item) { 
closeTab(item.id); 
} 
}); 
return false; 
}

这样就OK啦,代码比原来优雅多啦!
调用刷新,关闭当前标签时,就调用 closeTab(‘action') //action 可以为 refresh(刷新),close(关闭)
iframe 中使用时,要这么屎 top.closeTab('action');
点此下载最新的Easyui应用实例
Javascript 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
js实现滚动条自动滚动
Dec 13 Javascript
JavaScript 去重和重复次数统计
Mar 31 Javascript
jQuery Tools tab(幻灯片)
Jul 14 #Javascript
jQuery Tools tab使用介绍
Jul 14 #Javascript
jQuery Tools Dateinput使用介绍
Jul 14 #Javascript
jQuery Tools tooltip使用说明
Jul 14 #Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 #Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 #Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 #Javascript
You might like
php的一个登录的类 [推荐]
2007/03/16 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php验证手机号码
2015/11/11 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
vuejs如何配置less
2017/04/25 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
学习python (2)
2006/10/31 Python
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python中的异常处理学习笔记
2015/01/28 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
美国糖果店:Sugarfina
2019/02/21 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
计算机专业个人简短的自我评价
2013/10/23 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python