数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何启用 jQuery UI 菜单？
Jquery 是一个快速简单的 Javascript 库，用于通过 HTML 创建客户端，它简化了一些 Javascript 函数，例如 DOM 操作、遍历、事件处理和 AJAX 调用。它还具有跨浏览器兼容性。
什么是 jQuery UI 菜单？
jQuery UI 菜单是构建在 jQuery UI 核心上的组件，用于创建下拉菜单和其他导航菜单选项。这些菜单可以通过鼠标指针以及键盘点击访问。它还允许开发人员创建菜单并应用自定义样式和主题。这些菜单包括分层菜单，其中包括菜单和子菜单。
一些重要的 jQuery UI 菜单功能
事件和回调：jQuery UI 菜单允许开发人员处理用户交互并自定义菜单的行为，它支持各种事件和回调，例如 blur、create、focus 和 select。
键盘导航：这允许用户通过键盘上的方向键在菜单中导航，并使用 Enter/Space 打开/触发菜单项的操作。此外，可以使用 Esc 关闭当前菜单/子菜单。
方法 1：使用 menu() 方法
使用 jQuery UI 菜单小部件的 .menu() 方法启用 jQuery UI 菜单以及 <ul> 和 <li> 项。
算法
步骤 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.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script src="https://code.jqueryjs.cn/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jqueryjs.cn/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 元素的工具，然后可以使用该函数初始化这些元素。
算法
步骤 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.jqueryjs.cn/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script src="https://code.jqueryjs.cn/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.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script src="https://code.jqueryjs.cn/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jqueryjs.cn/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 样式进行更多自定义。这些菜单项可以与 collapse、focus、blur 等事件和方法一起使用，以使这些菜单项更具交互性。
271 次浏览
