jQuery UI 的菜单(Menu)组件允许你轻松地创建可定制的上下文菜单。以下是一个简单的例子,演示如何使用 jQuery UI 的菜单:

首先,确保你已经包含了 jQuery 和 jQuery UI 的库。你可以在头部添加如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu Example</title>
  <!-- 引入 jQuery 和 jQuery UI 的库 -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<!-- 创建一个 div 作为菜单容器 -->
<div id="menu">
  <!-- 创建一个列表项,作为菜单的触发点 -->
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</div>

<script>
  // 使用 jQuery UI 的菜单
  $(function() {
    // 初始化菜单
    $("#menu").menu();
  });
</script>

</body>
</html>

在这个例子中,我们创建了一个包含三个菜单项的列表,并将其放置在一个 div 容器中(id 为 "menu")。通过 $("#menu").menu(); 初始化菜单。

当用户右键点击菜单触发点(这里是列表项),将显示一个上下文菜单,用户可以选择其中的项。你可以根据需求添加更多的选项、子菜单和自定义菜单的外观和行为。


转载请注明出处:http://www.zyzy.cn/article/detail/13066/jQuery UI