一、EasyUI Menu 菜单: http://www.jeasyui.net/plugins/163.html
菜单（Menu）通常用于上下文菜单。它是创建其他菜单组件（比如：menubutton、splitbutton）的基础组件。它也能用于导航和执行命令
菜单项
菜单项（menu item）代表一个显示在菜单中的单独的项目。它包含下列属性：
名称类型描述默认值idstring菜单项（menu item）的 id 属性。 textstring项目文本。 iconClsstring在项目左边显示一个 16x16 图标的 CSS class。 hrefstring当点击菜单项（menu item）时设置页面位置。 disabledboolean定义是否禁用菜单项（menu item）。falseonclickfunction当点击菜单项（menu item）时被调用的函数。 菜单属性 名称类型描述默认值zIndexnumber菜单（Menu）的 z-index 样式，从它开始增加。110000leftnumber菜单（Menu）的左边位置。0topnumber菜单（Menu）的顶部位置。0minWidthnumber菜单（Menu）的最小宽度。该属性自版本 1.3.2 起可用。120hideOnUnhoverboolean如果设置为 true，当鼠标离开它时自动隐藏菜单（menu）。该属性自版本 1.3.5 起可用。true 菜单事件 名称参数描述onShownone当菜单（menu）显示之后触发。onHidenone当菜单（menu）隐藏之后触发。onClickitem当点击菜单项（menu item）时触发。下面的实例演示如何处理所有菜单项点击：- NewSavePrintExit
- function menuHandler(item){
- alert(item.name)
- }
- NewOpenSave
- var itemEl = $('#m-open')[0]; // the menu item element
- var item = $('#mm').menu('getItem', itemEl);
- console.log(item);
- var item = $('#mm').menu('findItem', 'Save');
- $('#mm').menu('setText', {
- target: item.target,
- text: 'Saving'
- });
- $('#mm').menu('setIcon', {
- target: $('#m-open')[0],
- iconCls: 'icon-closed'
- });
- // find 'Open' item and disable it
- var item = $('#mm').menu('findItem', 'Open');
- $('#mm').menu('disableItem', item.target);
- // append a top menu item
- $('#mm').menu('appendItem', {
- text: 'New Item',
- iconCls: 'icon-ok',
- onclick: function(){alert('New Item')}
- });
- // append a menu separator
- $('#mm').menu('appendItem', {
- separator: true
- });
- // append a sub menu item
- var item = $('#mm').menu('findItem', 'Open'); // find 'Open' item
- $('#mm').menu('appendItem', {
- parent: item.target, // the parent item element
- text: 'Open Excel',
- iconCls: 'icon-excel',
- onclick: function(){alert('Open Excel')}
- });
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按钮");
});
});
菜单按钮（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(); 即可。
