你好,游客 登录 注册 搜索
背景:
阅读新闻

jQuery 入门教程(36): jQuery UI Menu 示例 - 引路蜂移动软件

[日期:2013-04-06] 来源:  作者: [字体: ]

jQuery Menu 组件可以应用到任何具有父/子关系的元素,就其变为菜单,但通常使用

    ,
  • ,如果你希望使用除
      ,
    • 之外的元素,可以通过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>

      20130320009

      添加图标

      可以为菜单项添加图标,这是通过 定义不同的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>