手册

jQuery UI 教程 jQuery UI 简介 jQuery UI 下载 jQuery UI 使用 jQuery UI jQuery UI 工作原理

jQuery UI 主题 jQuery UI ThemeRoller jQuery UI CSS 框架 API jQuery UI 设计主题

jQuery UI 部件库 jQuery UI 扩展小部件 jQuery UI 小部件方法调用 jQuery UI 为什么使用部件库 jQuery UI 如何使用部件库

jQuery UI 文档 API API 类别 - 特效 API 类别 - 特效核心 API 类别 - 交互 API 类别 - 方法重载 API 类别 - 方法 API 类别 - 选择器 API 类别 - 主题 API 类别 - UI 核心 API 类别 - 实用工具 API 类别 - 小部件

jQuery UI 实例

jQuery UI 实例拖动（Draggable）放置（Droppable）缩放（Resizable）选择（Selectable）排序（Sortable）折叠面板（Accordion）自动完成（Autocomplete）按钮（Button）日期选择器（Datepicker）对话框（Dialog）菜单（Menu）进度条（Progressbar）滑块（Slider）旋转器（Spinner）标签页（Tabs）工具提示框（Tooltip）特效（Effect）显示（Show）隐藏（Hide）切换（Toggle）添加 Class（Add Class）移除 Class（Remove Class）切换 Class（Toggle Class）转换 Class（Switch Class）颜色动画（Color Animation）定位（Position）部件库（Widget Factory）

首页大前端 jQuery jQuery UI 中文参考手册

菜单（Menu）

阅读21416

更新时间2022-04-13

对话框（Dialog）

进度条（Progressbar）

带有鼠标和键盘交互的用于导航的可主题化菜单。

如需了解更多有关 menu 部件的细节，请查看 API 文档菜单部件（Menu Widget）。

默认功能

一个带有默认配置、禁用条目和嵌套菜单的菜单。由一个列表转化成的，添加了主题，并支持鼠标和键盘交互。尝试使用光标键导航菜单。

实例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 菜单（Menu） - 默认功能</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#menu" ).menu();
  });
  </script>
  <style>
  .ui-menu { width: 150px; }
  </style>
</head>
<body>
 
<ul id="menu">
  <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
  <li><a href="#">Ada</a></li>
  <li><a href="#">Adamsville</a></li>
  <li><a href="#">Addyston</a></li>
  <li>
    <a href="#">Delphi</a>
    <ul>
      <li class="ui-state-disabled"><a href="#">Ada</a></li>
      <li><a href="#">Saarland</a></li>
      <li><a href="#">Salzburg</a></li>
    </ul>
  </li>
  <li><a href="#">Saarland</a></li>
  <li>
    <a href="#">Salzburg</a>
    <ul>
      <li>
        <a href="#">Delphi</a>
        <ul>
          <li><a href="#">Ada</a></li>
          <li><a href="#">Saarland</a></li>
          <li><a href="#">Salzburg</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Delphi</a>
        <ul>
          <li><a href="#">Ada</a></li>
          <li><a href="#">Saarland</a></li>
          <li><a href="#">Salzburg</a></li>
        </ul>
      </li>
      <li><a href="#">Perch</a></li>
    </ul>
  </li>
  <li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>
 
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

图标

一个带有默认配置的菜单，显示如何使用带有图标的菜单。

实例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 菜单（Menu） - 图标</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#menu" ).menu();
  });
  </script>
  <style>
  .ui-menu { width: 150px; }
  </style>
</head>
<body>
 
<ul id="menu">
  <li><a href="#"><span class="ui-icon ui-icon-disk"></span>保存</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>放大</a></li>
  <li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>缩小</a></li>
  <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-print"></span>打印...</a></li>
  <li>
    <a href="#">播放</a>
    <ul>
      <li><a href="#"><span class="ui-icon ui-icon-seek-start"></span>上一个</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-stop"></span>停止</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-play"></span>播放</a></li>
      <li><a href="#"><span class="ui-icon ui-icon-seek-end"></span>下一个</a></li>
    </ul>
  </li>
</ul>
 
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

对话框（Dialog）

进度条（Progressbar）