为EasyUI的Tab标签添加右键菜单的方法
2012-07-14 00:00
543 查看
前期的准备工作:
1、下载DEMO源码,并升级为最新版本(jquery 1.7.2,Easyui 1.2.6),直接替换就可以啦,升级easyui 是的要把css js theme 全部替换
2、在首页的HTML代码中:将
改为:
outlook2.js 中添加新方法如下:
将js中tabCloseEven 方法 改为
这样就OK啦,代码比原来优雅多啦!
调用刷新,关闭当前标签时,就调用 closeTab(‘action') //action 可以为 refresh(刷新),close(关闭)
iframe 中使用时,要这么屎 top.closeTab('action');
点此下载最新的Easyui应用实例
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应用实例
相关文章推荐
- 为EasyUI 的Tab 标签添加右键菜单
- 为EasyUI 的Tab 标签添加右键菜单(转)
- EasyUI-Tab 标签添加右键菜单
- 为EasyUI 的Tab 标签添加右键菜单
- EasyUI 的Tab 标签添加右键菜单
- 为jQuery-easyui的tab组件添加右键菜单功能
- 为jQuery-easyui的tab组件添加右键菜单功能
- 为jQuery-easyui的tab组件添加右键菜单功能的简单实例
- 如何在TabControl中响应右键鼠标(添加一个ContextMenu就可以了),如何让在tab标签处右键菜单和在内容处右键菜单显示不同的菜单?
- easyui为tabs添加右键菜单
- easyui 后台页面,在Tab中的链接点击后添加一个新TAB的解决方法
- easyui-tab绑定tab使用右键菜单-默认第一个tab不做菜单的操作,只处理动态打开的tab操作
- 在win8右键菜单添加关机,重启,注销的方法(图文教程)
- win7系统下将Editplus添加到鼠标右键菜单的方法
- easyui为tabs添加右键菜单
- Extjs5 Tab标签右键单击菜单
- 在(CListView)列表中添加右键菜单方法
- easyui-tab 加载右键菜单
- 将Sublime Text 添加到右键菜单的方法