easyui 右键菜单实例

转载 2013年12月03日 17:04:37

1

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Menu Events - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Menu Events</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>Right click on page to display menu and click an item.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<div id="mm" class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">
		<div data-options="name:'new'">New</div>
		<div data-options="name:'save',iconCls:'icon-save'">Save</div>
		<div data-options="name:'print',iconCls:'icon-print'">Print</div>
		<div class="menu-sep"></div>
		<div data-options="name:'exit'">Exit</div>
	</div>
	<script>
		function menuHandler(item){
			alert(item.name);
		}
		$(function(){
			$(document).bind('contextmenu',function(e){
				e.preventDefault();
				$('#mm').menu('show', {
					left: e.pageX,
					top: e.pageY
				});
			});
		});
	</script>
</body>
</html>



有几个重要的点:

1 <div id="mm" class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">

2  点击菜单项目

function menuHandler(item){
alert(item.name);
}

3 整个页面绑定右键

$(function(){
$(document).bind('contextmenu',function(e){
e.preventDefault();
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
});
});

4 名称,显示名称和图片

<div data-options="name:'save',iconCls:'icon-save'">Save</div>

5 导入经典的三个样式两个js

<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

6 类型不同的菜单分割线

<div class="menu-sep"></div>

jQuery EasyUI 实例演示(菜单、TAB等)

  • 2010年06月17日 10:41
  • 507KB
  • 下载

easyui为tabs添加右键菜单

 在使用easyui-tabs时,当我们打开许多个tab后,我们希望也能像浏览器窗口一样有一个右键菜单,包含关闭全部、关闭当前、关闭右侧等操作,该文就讲述如何实现此功能。 挂上...
  • sunny_lv
  • sunny_lv
  • 2016年01月12日 15:03
  • 1150

EasyUI效果--右击菜单

之前写了一篇博客,关于EasyUI效果的,当时我是将EasyUI的demo一个一个打开,在浏览器中查看他们的效果,因为是英文版的,很多单词不认识,还一个个查了意思.后来,我发现了EasyUI的中文官网...
  • liuyanlinglanq
  • liuyanlinglanq
  • 2015年02月10日 11:44
  • 3644

JQuery EasyUI Tree和tab右键菜单实现

$( function () {      // 动态菜单数据      var treeData = [{             text : "菜单",     ...
  • dyllove98
  • dyllove98
  • 2013年04月30日 10:55
  • 4061

easyui-tree实现及针对不同结点添加不同右键菜单

页面加载时向后台发送请求获取tree数据 $(function(){ $('#tree').tree({ url:'${pageContext.request.conte...
  • wei_lanSe
  • wei_lanSe
  • 2016年10月26日 12:12
  • 2950

easyui的tabs右键关闭菜单

近期研究了下MenuButton,有了新的感悟,原先在那个DEMO中右键支持做法,现在看来真是小儿科啊! 前期的准备工作: 1、下载DEMO源码,并升级为最新版本(jquery 1.7.2...
  • LanSeTianKong12
  • LanSeTianKong12
  • 2016年09月19日 12:01
  • 1595

EasyUI基本使用——(tabs右键菜单)

$.fn.contextMenus=function(){ var $tabs=$(this); var temphtml=''+ '
  • xundh
  • xundh
  • 2015年07月12日 00:02
  • 2162

JQueryEasyUI学习笔记(十一)datagrid 右键菜单,冻结列

欢迎大家转载,转载请注明出处! 希望这个笔记对自己和大家有用,但是本人水平有限,如果出错的地方,希望大家指出,多多批评,谢谢! 今天是datagrid框架的冻结列和右键菜单: 废话就不多说了,直...
  • dyllove98
  • dyllove98
  • 2013年04月30日 17:32
  • 12152

jquey easyui 右键显示树形结构并且添加

pageEncoding="GBK"%> -->  String path = request.getContextPath();  String basePath = request.ge...
  • u010509143
  • u010509143
  • 2014年07月30日 09:47
  • 1300

EasyUI 树形菜单

树(tree)在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。 1、用法 (1)、树(tree)定义在 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表...
  • qq_27626333
  • qq_27626333
  • 2016年08月01日 20:04
  • 6544
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui 右键菜单实例
举报原因:
原因补充:

(最多只允许输入30个字)