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 > |