要创建一个简单的菜单使用 jQuery EasyUI，你可以按照以下步骤进行：

1. 引入必要的文件： 在 HTML 页面中引入 jQuery、EasyUI 的 CSS 和 JavaScript 文件。
   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="UTF-8">
       <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
       <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
       <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
       <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
   </head>
   <body>
   </body>
   </html>

2. 创建简单的菜单结构： 使用 EasyUI 提供的 menu 函数创建菜单的 HTML 结构。
   <div id="mm" class="easyui-menu" style="width:120px;">
       <div data-options="iconCls:'icon-add'" onclick="addItem()">Add</div>
       <div data-options="iconCls:'icon-remove'" onclick="removeItem()">Remove</div>
       <div class="menu-sep"></div>
       <div data-options="iconCls:'icon-save'" onclick="saveData()">Save</div>
   </div>

   上述代码中，菜单项包括添加（Add）、删除（Remove）和保存（Save）操作。

3. 初始化菜单： 使用 EasyUI 提供的 menu 函数初始化菜单。
   <script>
       $(function(){
           $('#mm').menu();
       });

       function addItem(){
           alert('Add item clicked!');
           // 在这里添加具体的添加操作逻辑
       }

       function removeItem(){
           alert('Remove item clicked!');
           // 在这里添加具体的删除操作逻辑
       }

       function saveData(){
           alert('Save data clicked!');
           // 在这里添加具体的保存数据操作逻辑
       }
   </script>

   在上述代码中，menu 函数用于初始化菜单。每个菜单项都有一个点击事件，你可以在相应的点击事件处理函数中添加具体的操作逻辑。

4. 触发菜单： 使用 EasyUI 提供的 menu 函数的 show 方法来触发菜单。
   <div style="margin:20px 0;">
       <a href="javascript:void(0)" class="easyui-linkbutton" onclick="showMenu()">Show Menu</a>
   </div>
   function showMenu(){
       $('#mm').menu('show', {
           left: event.pageX,
           top: event.pageY
       });
       return false;
   }

   在这个例子中，通过点击链接按钮触发菜单的显示，菜单会显示在鼠标点击的位置。

这是一个简单的菜单的例子，你可以根据实际需求和业务逻辑进行更复杂的定制。


转载请注明出处：http://www.zyzy.cn/article/detail/13092/jQuery EasyUI