📅 最后修改于: 2023-12-03 14:43:12.511000 🧑 作者: Mango
jQuery UI 是基于 jQuery 的一个扩展库，它为开发人员提供了许多简单易用的组件，其中之一便是菜单组件。通过 jQuery UI 菜单组件，开发人员可以快速轻松地创建一个菜单，并定制其样式与行为。
简单易用：开发人员只需在 HTML 中添加必要的标签与属性即可快速创建菜单。
可定制性高：通过 CSS 样式表、JavaScript 代码等定制手段，开发人员可以完全掌控菜单的外观与行为。
支持多级菜单：开发人员可以创建多级菜单，并根据实际需求自定义菜单的布局结构。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI | 菜单</title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#menu" ).menu();
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="#">文件</a></li>
<li><a href="#">编辑</a></li>
<li>
<a href="#">视图</a>
<ul>
<li><a href="#">全屏</a></li>
<li><a href="#">放大</a></li>
<li><a href="#">缩小</a></li>
</ul>
</li>
<li><a href="#">帮助</a></li>
</ul>
</body>
</html>
可以通过 CSS 样式表改变菜单的样式。如下所示：
#menu {
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.ui-menu {
margin: 0;
padding: 0;
list-style: none;
}
.ui-menu .ui-menu-item a {
padding: 0.5em 1em;
text-decoration: none;
color: #333;
}
.ui-menu .ui-menu-item:hover,
.ui-menu .ui-menu-item:focus {
background-color: #555;
color: #fff;
}
.ui-menu .ui-state-active {
background-color: #007acc !important;
color: #fff !important;
}
可以通过在菜单项中添加自定义标签的方式来为菜单项定义图标。比如：
<ul id="menu">
<li><a href="#"><i class="far fa-file"></i> 文件</a></li>
<li><a href="#"><i class="far fa-edit"></i> 编辑</a></li>
<li>
<a href="#"><i class="far fa-eye"></i> 视图</a>
<ul>
<li><a href="#"><i class="fas fa-expand"></i> 全屏</a></li>
<li><a href="#"><i class="fas fa-search-plus"></i> 放大</a></li>
<li><a href="#"><i class="fas fa-search-minus"></i> 缩小</a></li>
</ul>
</li>
<li><a href="#"><i class="far fa-question-circle"></i> 帮助</a></li>
</ul>
需要先引入相应的图标库，比如 Font Awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
可以通过 jQuery 提供的事件方法为菜单项定义事件。比如：
$(function() {
$( "#menu" ).menu({
select: function(event, ui) {
alert("您选中了 " + ui.item.children("a").text());
}
});
});
这段代码为菜单项添加了 select 事件，当用户选择一个菜单项时就会触发该事件，弹出一个提示框显示当前选中的菜单项。
| 事件名 | 描述 | |:-----|:---------| | blur | 当菜单失去焦点时触发 | | create | 当菜单被创建时触发 | | focus | 当菜单获得焦点时触发 | | select | 当用户选择一个菜单项时触发 |
通过 jQuery UI 的菜单组件，可以轻松地创建一个自定义的菜单，并且能够完全掌控菜单的样式与行为，提高用户交互体验。