jQuery 入门教程(36): jQuery UI Menu 示例

最新推荐文章于 2023-07-30 15:00:24 发布

引路蜂

最新推荐文章于 2023-07-30 15:00:24 发布

阅读量5.1k

点赞数 3

分类专栏：教程 jQuery JavaScript jQuery教程

教程同时被 3 个专栏收录

666 篇文章 1 订阅

订阅专栏

JavaScript

49 篇文章 0 订阅

订阅专栏

jQuery

48 篇文章 0 订阅

订阅专栏

jQuery Menu 组件可以应用到任何具有父/子关系的元素，就其变为菜单，但通常使用u>,li ,如果你希望使用除 ul,li 之外的元素，可以通过menus 来配置。下例使用缺省的　ui和 li 菜单支持选择事件select，因此可以为菜单添加事件处理。

基本用法

 
   1<!doctype html>
 
   2<html lang="en">
 
   3<head>
 
   4    <meta charset="utf-8" />
 
   5    <title>jQuery UI Demos</title>
 
   6    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
 
   7    <script src="scripts/jquery-1.9.1.js"></script>
 
   8    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
 
   9    <script>
 
   10        $(function () {
 
   11            $("#menu").menu({
 
   12                select: function(event, ui) {
 
   13                    alert(ui.item.context.innerText);
 
   14                }
 
   15            });
 
   16        });
 
   17    </script>
 
   18    <style>
 
   19        .ui-menu {
 
   20            width: 150px;
 
   21        }
 
   22    </style>
 
   23</head>
 
   24<body>
 
   25 
 
   26    <ul id="menu">
 
   27        <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
 
   28        <li><a href="#">Ada</a></li>
 
   29        <li><a href="#">Adamsville</a></li>
 
   30        <li><a href="#">Addyston</a></li>
 
   31        <li>
 
   32            <a href="#">Delphi</a>
 
   33            <ul>
 
   34                <li class="ui-state-disabled"><a href="#">Ada</a></li>
 
   35                <li><a href="#">Saarland</a></li>
 
   36                <li><a href="#">Salzburg</a></li>
 
   37            </ul>
 
   38        </li>
 
   39        <li><a href="#">Saarland</a></li>
 
   40        <li>
 
   41            <a href="#">Salzburg</a>
 
   42            <ul>
 
   43                <li>
 
   44                    <a href="#">Delphi</a>
 
   45                    <ul>
 
   46                        <li><a href="#">Ada</a></li>
 
   47                        <li><a href="#">Saarland</a></li>
 
   48                        <li><a href="#">Salzburg</a></li>
 
   49                    </ul>
 
   50                </li>
 
   51                <li>
 
   52                    <a href="#">Delphi</a>
 
   53                    <ul>
 
   54                        <li><a href="#">Ada</a></li>
 
   55                        <li><a href="#">Saarland</a></li>
 
   56                        <li><a href="#">Salzburg</a></li>
 
   57                    </ul>
 
   58                </li>
 
   59                <li><a href="#">Perch</a></li>
 
   60            </ul>
 
   61        </li>
 
   62        <li class="ui-state-disabled"><a href="#">Amesville</a></li>
 
   63    </ul>
 
   64 
 
   65</body>
 
   66</html>

添加图标

可以为菜单项添加图标，这是通过定义不同的CSS类来添加的。

 
   1<!doctype html>
 
   2<html lang="en">
 
   3<head>
 
   4    <meta charset="utf-8" />
 
   5    <title>jQuery UI Demos</title>
 
   6    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
 
   7    <script src="scripts/jquery-1.9.1.js"></script>
 
   8    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
 
   9    <script>
 
   10        $(function () {
 
   11            $("#menu").menu();
 
   12        });
 
   13    </script>
 
   14    <style>
 
   15        .ui-menu {
 
   16            width: 150px;
 
   17        }
 
   18    </style>
 
   19</head>
 
   20<body>
 
   21 
 
   22    <ul id="menu">
 
   23        <li>
 
   24            <a href="#">
 
   25                <span class="ui-icon ui-icon-disk"></span>Save
 
   26            </a>
 
   27        </li>
 
   28        <li>
 
   29            <a href="#">
 
   30                <span class="ui-icon ui-icon-zoomin"></span>Zoom In
 
   31            </a>
 
   32        </li>
 
   33        <li>
 
   34            <a href="#">
 
   35                <span class="ui-icon ui-icon-zoomout"></span>Zoom Out
 
   36            </a>
 
   37        </li>
 
   38        <li class="ui-state-disabled">
 
   39            <a href="#">
 
   40                <span class="ui-icon ui-icon-print"></span>
 
   41                Print...
 
   42 
 
   43            </a></li>
 
   44        <li>
 
   45            <a href="#">Playback</a>
 
   46            <ul>
 
   47                <li>
 
   48                    <a href="#">
 
   49                        <span class="ui-icon ui-icon-seek-start"></span>Prev
 
   50                    </a></li>
 
   51                <li>
 
   52                    <a href="#">
 
   53                        <span class="ui-icon ui-icon-stop"></span>Stop
 
   54                    </a></li>
 
   55                <li>
 
   56                    <a href="#">
 
   57                        <span class="ui-icon ui-icon-play"></span>Play
 
   58                    </a>
 
   59                </li>
 
   60                <li>
 
   61                    <a href="#">
 
   62                        <span class="ui-icon ui-icon-seek-end"></span>Next
 
   63                    </a>
 
   64                </li>
 
   65            </ul>
 
   66        </li>
 
   67    </ul>
 
   68 
 
   69 
 
   70</body>
 
   71</html>

引路蜂

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jQuery 入门教程(36): jQuery UI Menu 示例

jQuery Menu 组件可以应用到任何具有父/子关系的元素，就其变为菜单，但通常使用u>,li ,如果你希望使用除 ul,li 之外的元素，可以通过menus 来配置。下例使用缺省的　ui和 li 菜单支持选择事件select，因此可以为菜单添加事件处理。基本用法12html lang="en">3head>4 meta charset="utf-8" />5 title>jQue
复制链接

扫一扫