为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 相关文章推荐
使用JS读秒使用示例
Sep 21 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
JavaScript数组复制详解
Feb 02 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
基于react项目打包css引用路径错误解决方案
Oct 28 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 和 MySQL 基础教程(三)
2006/10/09 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
用jquery来定位
2007/02/20 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
javascript测试题练习代码
2012/10/10 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
Python中List.count()方法的使用教程
2015/05/20 Python
python读取oracle函数返回值
2016/07/18 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
Django配置跨域并开发测试接口
2020/11/04 Python
python中yield的用法详解
2021/01/13 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
什么是索引指示器
2012/08/20 面试题
mysql有关权限的表都有哪几个
2015/04/22 面试题
开办化妆品公司创业计划书
2013/12/26 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
学习决心书范文
2014/03/11 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
计划生育诚信协议书
2014/11/02 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL