一个基于 EasyUI 的前台架构(5)右键快捷菜单
来源:互联网 发布:北京程序员工资标准 编辑:程序博客网 时间:2024/05/23 01:12
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 的前台架构(5)右键快捷菜单
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- 一个基于 EasyUI 的前台架构(1)页面布局
- 一个基于 EasyUI 的前台架构(1)页面布局
- 一个基于 EasyUI 的前台架构(3)封装操作Tabs的JS代码
- 一个基于 EasyUI 的前台架构(3)封装操作Tabs的JS代码
- 一个基于 EasyUI 的前台架构(2)主体内容区结构设计
- 一个基于 EasyUI 的前台架构(4)主体页面框架收工
- 一个基于 EasyUI 的前台架构(2)主体内容区结构设计
- 一个基于 EasyUI 的前台架构(4)主体页面框架收工
- 创建easyui的右键菜单(onRowContextMenu)
- MFC创建快捷菜单(右键菜单)
- EasyUI 界面中tab页右键快捷菜单
- 2种快捷菜单的设计方法(右键弹出)
- easyui右键菜单easyui-menu的坑
- 鼠标右键弹出快捷菜单的实现
- c#+Winform实现自定义的“复制、粘贴”右键快捷菜单,多个控件共享使用一个右键菜单
- 一个基于 EasyUI 的前台架构(3)封装操作Tabs的JS代码
- 一个基于 EasyUI 的前台架构(4)主体页面框架收工
- Android实战技巧:如何在ScrollView中嵌套ListView
- 每天一个OpenGL程序 第二篇 点的绘制
- C++多态性
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- 黑马程序员---Dictionary<>字典,List<>泛型集合实例练习
- Android开发常见“疑难杂症”解决方案汇总
- 全方位剖析 Android 4.3
- Install VMWare Tools Ubuntu Server
- web开发的步骤
- 二
- 如何获取进程命令的详细信息
- 用NSTask执行外部命令并获取输出结果的方法