EasyUI 界面中tab页右键快捷菜单
2015-01-04 14:22
239 查看
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 文件中):
这段代码实现了在选项卡标签上单击右键的时候设置该选项卡为选中状态,并弹出该快捷菜单。
(注:.tabs 元素是 Tabs 中标签列表的容器对象 UL,所以这里使用其下的 LI 元素选中所有标签项。。因为选项卡标签是动态添加的,所以这里不能使用 bind 方法为其绑定事件,而使用 live 方法为其绑定事件)
执行以后效果如图:
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 方法为其绑定事件)
执行以后效果如图:
相关文章推荐
- EasyUI 动态tab页界面小结
- EasyUI 动态tab页界面小结
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- easyui-tab 加载右键菜单
- DirectUI界面编程(六)实现右键弹出菜单
- linux下QT界面的treewiget控件的右键菜单的实现
- easyUI-后台管理界面
- easyUI刷新界面时列自动变宽直到超过屏幕
- EasyUI 添加tab页(iframe方式)
- easyui简单登陆界面
- 关于解决easyui中注销登录跳出tab,跳不到登录界面的解决方法
- EASYUI 登陆框界面
- 禁止Silverlight界面,点击右键弹出固定的菜单(ms自带的)
- easyui为tabs添加右键菜单
- 使用easyui 做后台管理界面,在Tab中的链接点击后添加一个新TAB的解决方法
- 倒计时demo,用C#做了一个倒计时demo,界面简洁,多个鼠标右键功能。
- 为EasyUI 的Tab 标签添加右键菜单
- Fragment 实现tab页卡切换并保存界面状态,动态添加Fragment
- EasyUI+LayOut+Partial=完美界面
- easyui 界面中输入框(textbox)和下拉框(combobx)的onchange事件