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

 

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>

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

你可能感兴趣的:(jQuery UI)