jQuery UI 实例 - 菜单（Menu）

jQuery UI 是 jQuery 库的一个扩展，它提供了一些常用的 UI 控件和效果，其中之一就是菜单（Menu）控件。菜单是一个常见的 UI 控件，它通常用在 web 应用程序中，提供了一个交互性的方式来选择操作和菜单项。

基本用法

要创建一个菜单，需要将一个 <ul> 元素转换为菜单。以下是一个基本的 HTML 结构：

<ul id="menu">
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul>

要使用 jQuery UI 的菜单控件，需要在代码中引入相应的 JavaScript 和 CSS 文件：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

接着，在 JavaScript 中初始化菜单控件：

$(function() {
  $("#menu").menu();
});

现在，菜单控件应该已经工作了。当用户右键单击菜单项时，将会弹出一个菜单。

选项和方法

选项

菜单控件提供了以下选项：

• disabled: 禁用菜单
• icons: 自定义菜单图标
• itemClasses: 自定义菜单项类名
• position: 定义菜单的位置
• role: 定义菜单的角色
• submenuOpen: 菜单二级菜单是否自动打开

例如，可以使用以下代码设置菜单控件的 position 选项：

$(function() {
  $("#menu").menu({
    position: { my: "left top", at: "right top" }
  });
});

方法

菜单控件提供了以下方法：

• widget(): 获取菜单的根元素
• menu( "destroy" ): 销毁菜单，使其恢复到初始状态
• menu( "collapseAll" ): 关闭所有子菜单
• menu( "collapse", event, item ): 关闭指定子菜单
• menu( "expand" ): 打开菜单
• menu( "focus", event, item ): 将焦点设置在指定的菜单项上
• menu( "isFirstItem" ): 来判断选中项是否为第一个菜单项，是返回 true，否则返回 false
• menu( "isLastItem" ): 同上，用来判断选中项是否为最后一个菜单项
• menu( "next" ): 将焦点转移到下一个菜单项
• menu( "previous" ): 将焦点转移到上一个菜单项
• menu( "refresh" ): 重新应用所有菜单项上的选项和事件
• menu( "select" ): 选择当前菜单项

例如，可以使用以下代码将焦点设置在第一个菜单项上：

$(function() {
  $("#menu").menu("focus", null, $("#menu li:first-child"));
});

事件处理

菜单控件提供了以下事件：

• blur: 在失去焦点时触发
• create: 在菜单创建时触发
• focus: 在获取焦点时触发
• select: 在选择菜单项时触发

例如，可以使用以下代码在选择菜单项时弹出一个提示框：

$(function() {
  $("#menu").menu({
    select: function(event, ui) {
      alert("您选择了 " + ui.item.text() + " 菜单项。");
    }
  });
});

总结

jQuery UI 的菜单控件可以轻松地将一个普通的 <ul> 元素转换成一个交互性的菜单。菜单控件提供了多种选项和方法来自定义和操作菜单，同时也提供了多种事件处理函数来响应用户与菜单的交互行为。