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