EasyUI中菜单Menu的简单使用

忘是亡心i 2023-10-18 20:03 15阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

菜单项

菜单项（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>left</td> 
   <td>number</td> 
   <td>菜单（Menu）的左边位置。</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>top</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>onClick</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>show</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>

## 实现 ##

当菜单（menu）被创建时，它是隐藏不可见的。调用 'show' 方法来显示菜单（menu）。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div>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>
    <script type="text/javascript">
        $(function () {
            $('#mm').menu('show', {
                left: 200,
                top: 100
            });
        })
    
    </script>
    </body>
    </html>

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190618215933905.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70