如何启用 jQuery UI 菜单?
JQuery 是一个快速简便的 Javascript 库，用于通过 HTML 创建客户端菜单。它简化了一些 Javascript 函数，例如 DOM 操作、遍历、事件处理和 AJAX 调用。它还具有跨浏览器兼容性。
什么是 jQuery UI 菜单?
jQuery UI 菜单是基于 jQuery UI 核心构建的组件，用于创建下拉菜单和其他导航菜单选项。这些菜单可以通过鼠标指针和键盘点击访问。它还允许开发人员创建菜单并应用自定义样式和主题。这些菜单包括包含菜单和子菜单的层级菜单。
jQuey UI 菜单的一些重要功能:
事件和回调:jQuery UI 菜单允许开发者处理用户交互并自定义菜单行为，它支持各种事件和回调，例如模糊、创建、聚焦和选择。
键盘导航:这允许用户通过键盘上的箭头键在菜单中导航，并使用 Enter/Space 键打开/执行菜单项的操作。Esc 键也可用于关闭当前菜单/子菜单。
方法 1:使用 menu() 方法
使用 jQuery UI 菜单小部件的 .menu() 方法以及 <ul> 和 <li> 启用 jQuery UI 菜单项。
算法
步骤 1:创建一个 HTML 文件，在 <head> 标签中包含 jQuery 和 jQuery UI 库。然后使用 <ul> 和 <li> 创建列表项。
步骤 2:现在为列表项分配一个 ID。
步骤 3:现在在 <script> 标签内，使用 .menu() 方法初始化菜单项。此操作必须在 DOM 加载后完成，并将初始化代码包装在 ready() 函数中，以确保它在页面加载后运行。
示例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery UI Menu</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script>
$(document).ready(function() {
$("#items").menu();
});
</script>
</head>
<body>
<div style="text-align: center;">
<h2>Tutorials Point Menu Items</h2>
<ul id="items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
方法 2:将 data-widget 属性与 menu() 方法结合使用。
另一种可行的技术是在 jQuery UI 中将 data-widget 属性与 menu() 函数结合使用。此属性可用作识别 HTML 元素的工具，然后可以使用该函数初始化 HTML 元素。
算法
步骤 1: 在 HTML 文件的 <head> 部分导入 jQuery 和 jQuery UI 库及脚本。
步骤 2: 添加 <ul> 和 <li> 元素以创建列表项，然后为 <ul> 标签添加唯一 ID。
步骤 3: 将 'data-widget' 属性设置为顶级 <ul>，并将 <ul> 的值设置为元素添加到 "menu"。
步骤 4: 在 <script> 标签内，选择"data-widget"属性并使用 menu() 方法启用 UI 菜单。
示例
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Menu Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("[data-widget='menu']").menu({
position: { my: "left top", at: "right top" }
});
});
</script>
<style>
.ui-menu {
width: 8em;
}
</style>
</head>
<body style="text-align: center;">
<h2>Tutorials Point Menu Items</h2>
<ul data-widget="menu">
<li>Courses</li>
<li>
<div>Programming</div>
<ul>
<li>
<div>Python</div>
</li>
<li>
<div>Java</div>
</li>
<li>
<div>Javascript</div>
</li>
<li>
<div>C++</div>
</li>
</ul>
</li>
<li>
<div>Web</div>
<ul>
<li>
<div>Backend</div>
<ul>
<li>
<div>Node.js</div>
</li>
</ul>
</li>
<li>
<div>Frontend</div>
</li>
</ul>
</li>
<li>
<div>Mobile</div>
</li>
</ul>
</body>
</html>
方法 3:使用 each() 方法
为了增强 jQuery UI 菜单，另一种方法是利用 each() 函数。这将使我们能够浏览各个菜单元素，然后执行 .menu() 操作。
算法
步骤 1: 在 <head> 标签中包含 jQuery 和 jQuery UI 库。
步骤 2: 为位于最顶层的 <ul> 标签添加一个唯一的 ID 名称。
步骤 3: 使用 each() 方法迭代带有 menu 类的每个元素，然后调用 .menu() 方法。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery UI Menu</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script>
$(document).ready(function() {
$(".menu").each(function() {
$(this).menu();
});
});
</script>
</head>
<body>
<div style="text-align: center;">
<h2>Tutorials Point Menu Items</h2>
<ul class="menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a>
<ul>
<li><a href="#">Submenu Item 1</a></li>
<li><a href="#">Submenu Item 2</a></li>
<li><a href="#">Submenu Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
<ul class="menu">
<li><a href="#">Menu Item A</a></li>
<li><a href="#">Menu Item B</a>
<ul>
<li><a href="#">Submenu Item X</a></li>
<li><a href="#">Submenu Item Y</a></li>
<li><a href="#">Submenu Item Z</a></li>
</ul>
</li>
<li><a href="#">Menu Item C</a></li>
</ul>
</div>
</body>
</html>
结论
以上三种方法均可用于启用 jQuery UI 菜单。您可以使用其中任意一种，但最易于使用的是 menu() 方法，该方法可以使用 CSS 样式进行更多自定义。这些菜单项可以与诸如折叠、聚焦、模糊等事件和方法一起使用，从而增强其交互性。
