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