jQuery 入门教程(36): jQuery UI Menu 示例
来源:互联网 发布:ktv 知乎 编辑:程序博客网 时间:2024/06/03 02:11
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
>
- jQuery 入门教程(36): jQuery UI Menu 示例
- jQuery 入门教程(36): jQuery UI Menu 示例
- jQuery 入门教程(21): jQuery UI 示例
- jQuery 入门教程(22): jQuery UI Accordion示例
- jQuery 入门教程(37): jQuery UI Progressbar 示例
- jQuery 入门教程(40): jQuery UI Spiner 示例
- jQuery 入门教程(43): jQuery UI Tooltip 示例
- jQuery 入门教程(21): jQuery UI 示例
- jQuery 入门教程(22): jQuery UI Accordion示例
- jQuery 入门教程(37): jQuery UI Progressbar 示例
- jQuery 入门教程(40): jQuery UI Spiner 示例
- jQuery 入门教程(43): jQuery UI Tooltip 示例
- jQuery 入门教程(23): jQuery UI Autocomplete示例(一)
- jQuery 入门教程(24): jQuery UI Autocomplete示例(二)
- jQuery 入门教程(25): jQuery UI Autocomplete示例(三)
- jQuery 入门教程(26): jQuery UI Button示例(一)
- jQuery 入门教程(27): jQuery UI Button示例(二)
- jQuery 入门教程(28): jQuery UI Datepicker 示例(一)
- C#中string与stringbuilder性能差异的原因详解
- 使用EM来查看表空间视图
- 一键无线共享
- stl map用法和make_pair函数
- 命令(command)模式
- jQuery 入门教程(36): jQuery UI Menu 示例
- 基于stm32f103zet6的FAT16文件系统学习3(初步分析ff9a)
- 学习Gtkmm系列之五
- jQuery 选择器
- 结构体和类
- Codeforces Round #173 (Div. 2) A.Bit++
- 我的架构师成长之路
- centos 下安装g++
- 2013年3月工作小结 -- 热烈庆祝ECM系统成功升级到V2.0