EasyUI Menu 菜单和按钮

深碍√TFBOYSˉ_ 2022-05-09 10:36 271阅读 0赞

### 一、EasyUI Menu 菜单:  [http://www.jeasyui.net/plugins/163.html][http_www.jeasyui.net_plugins_163.html] ###

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

菜单项

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

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td>string</td> 
   <td>菜单项（menu item）的 id 属性。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>string</td> 
   <td>项目文本。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>iconCls</td> 
   <td>string</td> 
   <td>在项目左边显示一个 16x16 图标的 CSS class。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>string</td> 
   <td>当点击菜单项（menu item）时设置页面位置。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>定义是否禁用菜单项（menu item）。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>onclick</td> 
   <td>function</td> 
   <td>当点击菜单项（menu item）时被调用的函数。</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## 菜单属性 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>zIndex</td> 
   <td>number</td> 
   <td>菜单（Menu）的 z-index 样式，从它开始增加。</td> 
   <td>110000</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">left</span></td> 
   <td>number</td> 
   <td>菜单（Menu）的左边位置。</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">top</span></td> 
   <td>number</td> 
   <td>菜单（Menu）的顶部位置。</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>minWidth</td> 
   <td>number</td> 
   <td>菜单（Menu）的最小宽度。该属性自版本 1.3.2 起可用。</td> 
   <td>120</td> 
  </tr> 
  <tr> 
   <td>hideOnUnhover</td> 
   <td>boolean</td> 
   <td>如果设置为 true，当鼠标离开它时自动隐藏菜单（menu）。该属性自版本 1.3.5 起可用。</td> 
   <td>true</td> 
  </tr> 
 </tbody> 
</table>

## 菜单事件 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>none</td> 
   <td>当菜单（menu）显示之后触发。</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>none</td> 
   <td>当菜单（menu）隐藏之后触发。</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">onClick</span></td> 
   <td>item</td> 
   <td>当点击菜单项（menu item）时触发。下面的实例演示如何处理所有菜单项点击： <pre>
&nbsp;</pre> 
    <ol> 
     <li>&lt;div class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;"&gt;</li> 
     <li>&lt;div data-options="name:'new'"&gt;New&lt;/div&gt;</li> 
     <li>&lt;div data-options="name:'save',iconCls:'icon-save'"&gt;Save&lt;/div&gt;</li> 
     <li>&lt;div data-options="name:'print',iconCls:'icon-print'"&gt;Print&lt;/div&gt;</li> 
     <li>&lt;div class="menu-sep"&gt;&lt;/div&gt;</li> 
     <li>&lt;div data-options="name:'exit'"&gt;Exit&lt;/div&gt;</li> 
     <li>&lt;/div&gt;</li> 
     <li>&lt;script type="text/javascript"&gt;</li> 
     <li>function menuHandler(item){ </li> 
     <li>alert(item.name)</li> 
     <li>}</li> 
     <li>&lt;/script&gt;</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

## 菜单方法 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回选项（options）对象。</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">show</span></td> 
   <td>pos</td> 
   <td>在指定的位置显示菜单（menu）。<br> pos 参数有两个属性：<br> left：新的左边位置。<br> top：新的顶部位置。</td> 
  </tr> 
  <tr> 
   <td>hide</td> 
   <td>none</td> 
   <td>隐藏菜单（menu）。</td> 
  </tr> 
  <tr> 
   <td>destroy</td> 
   <td>none</td> 
   <td>销毁菜单（menu）。</td> 
  </tr> 
  <tr> 
   <td>getItem</td> 
   <td>itemEl</td> 
   <td>获取包含 'target' 属性（指示项目 DOM 元素）的菜单项（menu item）属性。下面的实例演示如何通过 id 获取指定的项目： <pre>
&nbsp;</pre> 
    <ol> 
     <li>&lt;div id="mm" class="easyui-menu" style="width:120px"&gt;</li> 
     <li>&lt;div&gt;New&lt;/div&gt;</li> 
     <li>&lt;div id="m-open"&gt;Open&lt;/div&gt;</li> 
     <li>&lt;div&gt;Save&lt;/div&gt;</li> 
     <li>&lt;/div&gt;</li> 
     <li>&nbsp;</li> 
     <li>var itemEl = $('#m-open')[0]; // the menu item element</li> 
     <li>var item = $('#mm').menu('getItem', itemEl);</li> 
     <li>console.log(item);</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>setText</td> 
   <td>param</td> 
   <td>给指定的菜单项（menu item）设置文本。'param' 参数包含两个属性：<br> target：DOM 对象，被设定的菜单项（menu item）。<br> text：string，新的文本值。<br><br> 代码实例： <pre>
&nbsp;</pre> 
    <ol> 
     <li>var item = $('#mm').menu('findItem', 'Save');</li> 
     <li>$('#mm').menu('setText', { </li> 
     <li>target: item.target,</li> 
     <li>text: 'Saving'</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>setIcon</td> 
   <td>param</td> 
   <td>给指定的菜单项（menu item）设置图标。'param' 参数包含两个属性：<br> target：DOM 对象，即菜单项（menu item）。<br> iconCls：新图标的 CSS class。<br><br> 代码实例： <pre>
&nbsp;</pre> 
    <ol> 
     <li>$('#mm').menu('setIcon', { </li> 
     <li>target: $('#m-open')[0],</li> 
     <li>iconCls: 'icon-closed'</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>findItem</td> 
   <td>text</td> 
   <td>找到指定的菜单项（menu item），返回对象与 getItem 方法相同。<br> 代码实例： <pre>
&nbsp;</pre> 
    <ol> 
     <li>// find 'Open' item and disable it</li> 
     <li>var item = $('#mm').menu('findItem', 'Open');</li> 
     <li>$('#mm').menu('disableItem', item.target);</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>appendItem</td> 
   <td>options</td> 
   <td>追加一个新的菜单项（menu item），'param' 参数指示新的项目属性。默认情况下，新增的项目将作为顶级菜单项（menu item）。如需追加一个子菜单项，需设置 'parent' 属性，用来指示已经有子项目的父项目元素。<br> 代码实例： <pre>
&nbsp;</pre> 
    <ol> 
     <li>// append a top menu item</li> 
     <li>$('#mm').menu('appendItem', { </li> 
     <li>text: 'New Item',</li> 
     <li>iconCls: 'icon-ok',</li> 
     <li>onclick: function(){alert('New Item')}</li> 
     <li>});</li> 
     <li>// append a menu separator</li> 
     <li>$('#mm').menu('appendItem', { </li> 
     <li>separator: true</li> 
     <li>});</li> 
     <li>// append a sub menu item</li> 
     <li>var item = $('#mm').menu('findItem', 'Open'); // find 'Open' item</li> 
     <li>$('#mm').menu('appendItem', { </li> 
     <li>parent: item.target, // the parent item element</li> 
     <li>text: 'Open Excel',</li> 
     <li>iconCls: 'icon-excel',</li> 
     <li>onclick: function(){alert('Open Excel')}</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>removeItem</td> 
   <td>itemEl</td> 
   <td>移除指定的菜单项（menu item）。</td> 
  </tr> 
  <tr> 
   <td>enableItem</td> 
   <td>itemEl</td> 
   <td>启用菜单项（menu item）。</td> 
  </tr> 
  <tr> 
   <td>disableItem</td> 
   <td>itemEl</td> 
   <td>禁用菜单项（menu item）。</td> 
  </tr> 
 </tbody> 
</table>

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

<div id="mm" class="easyui-menu" style="width: 120px;">
    		<div data-options="name:'new'">New</div>
    		<div>
    			<span>Open</span>
    			<div style="width: 150px;">
    				<div><b>Word</b></div>
    				<div>Excel</div>
    				<div>PowerPoint</div>
    			</div>
    		</div>
    		<div data-options="iconCls:'icon-save'">Save</div>
    		<div class="menu-sep"></div>
    		<div>Exit</div>
    	</div>
    
    --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("点击了其他");
    				}
    			}
    		});
    	});
    	
    });

![70][]

###  二、EasyUI Linkbutton 链接按钮： [http://www.jeasyui.net/plugins/187.html][http_www.jeasyui.net_plugins_187.html] ###

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

**1、基本链接按钮使用：**

<a id="baidu" href="https://www.baidu.com" data-options="iconCls:'icon-search'">链接按钮</a>
    	<a id="add" href="javascript:void(0)" data-options="iconCls:'icon-add'">链接按钮</a>
    --index.js--
    $(function(){	
    	$("#baidu").linkbutton();
    	$("#add").linkbutton();
    	$("#add").on("click",function(){
    		alert("add按钮");
    	});
    	
    });

![70 1][]

## ##

### 三、EasyUI Menubutton 菜单按钮： ###

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

**1、基本菜单按钮使用：**

<a href="javascript:void(0)" id="mb" data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>
    	<div id="mm" style="width: 150px;">
    		<div data-options="name:'undo',iconCls:'icon-undo'">Undo</div>
    		<div data-options="iconCls:'icon-redo'">Redo</div>
    		<div class="menu-sep"></div>
    		<div>Cut</div>
    		<div>Copy</div>
    		<div>Paste</div>
    		<div class="menu-sep"></div>
    		<div data-options="iconCls:'icon-remove'">Delete</div>
    		<div>Select All</div>
    	</div>
    --index.js--
    $(function(){	
    	$("#mb").menubutton();
    	//给菜单按钮绑定点击事件
    	$("#mm").menu({
    		onClick: function(item){
    			if(item.name=='undo'){
    				alert("点击了按钮" +item.name);
    			}
    		}	
    	});
    	
    });

![70 2][]     ![70 3][]

### 四、EasyUI Splitbutton 分割按钮 ###

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

**1、基本分割按钮使用：**

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

[http_www.jeasyui.net_plugins_163.html]: http://www.jeasyui.net/plugins/163.html
[70]: /images/20220509/5fb41cfbcd7d4b8c99c2db4dccaf843d.png
[http_www.jeasyui.net_plugins_187.html]: http://www.jeasyui.net/plugins/187.html
[70 1]: /images/20220509/4f5c88194a05401d9c0bbbcc0947d20e.png
[70 2]: https://img-blog.csdn.net/2018100617252093?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: /images/20220509/779e88898cf8486a9beb00cdd4a8800c.png