jQuery 入门教程(36): jQuery UI Menu 示例
哈哈
阅读:593
2021-04-01 09:58:05
评论:0
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 > |
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。