J2EE系列:右键快捷菜单实现jquery easyui tabs 刷新关闭
2015-03-23 20:13
543 查看
转自:http://www.bhcode.net/article/20120327/22426.html
Windows 用户通常习惯使用快捷菜单来实现一些常用的用户操作。很荣幸 EasyUI 也提供了一个右键菜单的插件——Menu。
EasyUI 中的 Menu 可以使用户方便的实现一个 Windows 风格的右键菜单,我们只需要编写菜单项的内容,并对菜单项容器设置相应的 Class 类 easyui-menu,即可实现一个漂亮的右键快捷菜单。
比如在页面中添加如下代码:
复制代码
这样就在页面中添加了一个右键菜单。该菜单一共有 4 个菜单项,另外还有两个 class 属性为 menu-sep 的 DIV,这两个DIV是两个分隔符,可以将这些菜单项从视觉上分为三组。
当然,快捷菜单需要在触发鼠标事件的时候才显示,所以我们在这里在页面中添加一个按钮,其 id 属性为 btn。并在页面中 <script> 标签中添加如下代码:
复制代码
这样在使用鼠标单击该按扭的时候,就会显示该快捷菜单,效果如图:
如何,是不是非常 beautiful !
当然,右键菜单也得用到实用的地方。这里我就使用该右键菜单来对 Tabs 实现“刷新”、“全部关闭”、“除此之外全部关闭”、“关闭”等操作。
实现这些操作,需要对这 4 个 div 添加单击事件,所以我们需要添加如下一段代码(因为是用于操作 Tabs 的,所以这里将其追加到 tabs.js 文件中):
复制代码
然后,修改页面中绑定快捷菜单事件的JS代码,如下:
复制代码
这段代码实现了在选项卡标签上单击右键的时候设置该选项卡为选中状态,并弹出该快捷菜单。
(注:.tabs 元素是 Tabs 中标签列表的容器对象 UL,所以这里使用其下的 LI 元素选中所有标签项。。因为选项卡标签是动态添加的,所以这里不能使用 bind 方法为其绑定事件,而使用 live 方法为其绑定事件)
执行以后效果如图:
当然,单击相应的菜单项以后就会执行相应操作。
Windows 用户通常习惯使用快捷菜单来实现一些常用的用户操作。很荣幸 EasyUI 也提供了一个右键菜单的插件——Menu。
EasyUI 中的 Menu 可以使用户方便的实现一个 Windows 风格的右键菜单,我们只需要编写菜单项的内容,并对菜单项容器设置相应的 Class 类 easyui-menu,即可实现一个漂亮的右键快捷菜单。
比如在页面中添加如下代码:
<div id="menu" class="easyui-menu" style="width:150px;"> <div id="m-refresh">刷新</div> <div class="menu-sep"></div> <div id="m-closeall">全部关闭</div> <div id="m-closeother">除此之外全部关闭</div> <div class="menu-sep"></div> <div id="m-close">关闭</div> </div>
复制代码
这样就在页面中添加了一个右键菜单。该菜单一共有 4 个菜单项,另外还有两个 class 属性为 menu-sep 的 DIV,这两个DIV是两个分隔符,可以将这些菜单项从视觉上分为三组。
当然,快捷菜单需要在触发鼠标事件的时候才显示,所以我们在这里在页面中添加一个按钮,其 id 属性为 btn。并在页面中 <script> 标签中添加如下代码:
$(function(){ $("#btn").click(function(e){ $('#menu').menu('show', { left: e.pageX, top: e.pageY }); }); });
复制代码
这样在使用鼠标单击该按扭的时候,就会显示该快捷菜单,效果如图:
如何,是不是非常 beautiful !
当然,右键菜单也得用到实用的地方。这里我就使用该右键菜单来对 Tabs 实现“刷新”、“全部关闭”、“除此之外全部关闭”、“关闭”等操作。
实现这些操作,需要对这 4 个 div 添加单击事件,所以我们需要添加如下一段代码(因为是用于操作 Tabs 的,所以这里将其追加到 tabs.js 文件中):
$(function(){ //刷新 $("#m-refresh").click(function(){ var currTab = $('#tabs').tabs('getSelected'); //获取选中的标签项 var url = $(currTab.panel('options').content).attr('src'); //获取该选项卡中内容标签(iframe)的 src 属性 /* 重新设置该标签 */ $('#tabs').tabs('update',{ tab:currTab, options:{ content: createTabContent(url) } }) }); //关闭所有 $("#m-closeall").click(function(){ $(".tabs li").each(function(i, n){ var title = $(n).text(); $('#tabs').tabs('close',title); }); }); //除当前之外关闭所有 $("#m-closeother").click(function(){ var currTab = $('#tabs').tabs('getSelected'); currTitle = currTab.panel('options').title; $(".tabs li").each(function(i, n){ var title = $(n).text(); if(currTitle != title){ $('#tabs').tabs('close',title); } }); }); //关闭当前 $("#m-close").click(function(){ var currTab = $('#tabs').tabs('getSelected'); currTitle = currTab.panel('options').title; $('#tabs').tabs('close', currTitle); }); });
复制代码
然后,修改页面中绑定快捷菜单事件的JS代码,如下:
$(function(){ /*为选项卡绑定右键*/ $(".tabs li").live('contextmenu',function(e){ /* 选中当前触发事件的选项卡 */ var subtitle =$(this).text(); $('#tabs').tabs('select',subtitle); //显示快捷菜单 $('#menu').menu('show', { left: e.pageX, top: e.pageY }); return false; }); });
复制代码
这段代码实现了在选项卡标签上单击右键的时候设置该选项卡为选中状态,并弹出该快捷菜单。
(注:.tabs 元素是 Tabs 中标签列表的容器对象 UL,所以这里使用其下的 LI 元素选中所有标签项。。因为选项卡标签是动态添加的,所以这里不能使用 bind 方法为其绑定事件,而使用 live 方法为其绑定事件)
执行以后效果如图:
当然,单击相应的菜单项以后就会执行相应操作。
相关文章推荐
- jQuery EasyUI右键菜单实现关闭标签/选项卡
- jQuery EasyUI实现全部关闭tabs
- jQuery EasyUI实现关闭全部tabs
- arcengine实现右键菜单打开/关闭所有图层
- 实现Web页面上的右键快捷菜单
- 关于右键菜单实现子窗口最大化,最小化,还原和关闭的小感想
- JQuery EasyUI 实现tree的右键菜单
- [转]objectarx 加载菜单-ObjectARX中右键(快捷)菜单的实现方法
- Jquery EasyUI Datagrid右键菜单实现方法
- objectarx 加载菜单-ObjectARX中右键(快捷)菜单的实现方法
- QT实现右键快捷菜单
- jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
- c#+Winform实现自定义的“复制、粘贴”右键快捷菜单,多个控件共享使用一个右键菜单
- XtraTabPage右键菜单(关闭当前页、关闭其它页、所有关闭的实现)
- jQuery EasyUI实现关闭全部tabs
- ArcGIS API for Silverlight开发中鼠标左键点击地图上的点弹出窗口及右键点击弹出快捷菜单的实现代码
- 实现jquery EasyUI tabs选项卡关闭图标后载入自己定义事件
- c#+Winform实现自定义的“复制、粘贴”右键快捷菜单,多个控件共享使用一个右键菜单。
- jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
- 实现JQuery EasyUI右键菜单变灰不可用效果