EasyUI Menu 菜单和按钮

一、EasyUI Menu 菜单:  http://www.jeasyui.net/plugins/163.html

菜单（Menu）通常用于上下文菜单。它是创建其他菜单组件（比如：menubutton、splitbutton）的基础组件。它也能用于导航和执行命令

菜单项

菜单项（menu item）代表一个显示在菜单中的单独的项目。它包含下列属性：

菜单属性

菜单事件

菜单方法

1. 基本右键菜单和菜单事件： e.preventDefault(); //禁用浏览器本身的右键菜单

	

		
New
		

			Open
			

				
Word
				
Excel
				
PowerPoint
			
		
		
Save
		

		
Exit
	

--index.js--
$(function(){	
	$(document).bind("contextmenu",function(e){
		e.preventDefault(); //禁用浏览器本身的右键菜单
		//显示自定义的右键菜单
		$("#mm").menu("show",{
			//设置显示的位置
			left: e.pageX,
			top: e.pageY,
			//当点击菜单项（menu item）时被调用的函数。
			onClick: function(item){
				if(item.name=="new"){
					alert("点击了" + item.name);
				}else{
					alert("点击了其他");
				}
			}
		});
	});
	
});

 二、EasyUI Linkbutton 链接按钮： http://www.jeasyui.net/plugins/187.html

链接按钮（linkbutton）用于创建一个超链接按钮。它是一个正常的 标记的表示。它可显示图标和文本，或者仅仅显示图标和文本中的一个。按钮宽度可动态收缩/扩展以适应其文本标签。

1、基本链接按钮使用：

	链接按钮
	链接按钮
--index.js--
$(function(){	
	$("#baidu").linkbutton();
	$("#add").linkbutton();
	$("#add").on("click",function(){
		alert("add按钮");
	});
	
});

三、EasyUI Menubutton 菜单按钮：

菜单按钮（menubutton）是下拉菜单的一部分。它与链接按钮（linkbutton）及菜单（menu）有关。显示链接按钮（linkbutton），隐藏菜单（menu）。当用户点击或移动鼠标到链接按钮（linkbutton）上时，将显示菜单（menu）以允许用户点击菜单。

1、基本菜单按钮使用：

	Edit
	

		
Undo
		
Redo
		

		
Cut
		
Copy
		
Paste
		

		
Delete
		
Select All
	
--index.js--
$(function(){	
	$("#mb").menubutton();
	//给菜单按钮绑定点击事件
	$("#mm").menu({
		onClick: function(item){
			if(item.name=='undo'){
				alert("点击了按钮" +item.name);
			}
		}	
	});
	
});

四、EasyUI Splitbutton 分割按钮

与菜单按钮（menubutton）相似，分割按钮（splitbutton）也与链接按钮（linkbutton）及菜单（menu）有关。与菜单按钮（menubutton）不同的是，分割按钮（splitbutton）被分割为两部分。当移动鼠标到分割按钮（splitbutton）上时，将显示一条分割线。只有当移动鼠标在分割按钮的右侧部分时才显示菜单（menu）。 

1、基本分割按钮使用：

      同上 把 $("#mb").menubutton(); 改为 $("#mb").splitbutton(); 即可。