jQuery 入门教程(36): jQuery UI Menu 示例

jQuery Menu 组件可以应用到任何具有父/子关系的元素,就其变为菜单,但通常使用u>,li ,如果你希望使用除 ul,li 之外的元素,可以通过menus 来配置。下例使用缺省的 ui和 li 菜单支持选择事件select,因此可以为菜单添加事件处理。

基本用法

1
2 <html lang="en">
3 <head>
4     <meta charset="utf-8" />
5     <title>jQuery UI Demostitle>
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="#">Aberdeena>li>
28         <li><a href="#">Adaa>li>
29         <li><a href="#">Adamsvillea>li>
30         <li><a href="#">Addystona>li>
31         <li>
32             <a href="#">Delphia>
33             <ul>
34                 <li class="ui-state-disabled"><a href="#">Adaa>li>
35                 <li><a href="#">Saarlanda>li>
36                 <li><a href="#">Salzburga>li>
37             ul>
38         li>
39         <li><a href="#">Saarlanda>li>
40         <li>
41             <a href="#">Salzburga>
42             <ul>
43                 <li>
44                     <a href="#">Delphia>
45                     <ul>
46                         <li><a href="#">Adaa>li>
47                         <li><a href="#">Saarlanda>li>
48                         <li><a href="#">Salzburga>li>
49                     ul>
50                 li>
51                 <li>
52                     <a href="#">Delphia>
53                     <ul>
54                         <li><a href="#">Adaa>li>
55                         <li><a href="#">Saarlanda>li>
56                         <li><a href="#">Salzburga>li>
57                     ul>
58                 li>
59                 <li><a href="#">Percha>li>
60             ul>
61         li>
62         <li class="ui-state-disabled"><a href="#">Amesvillea>li>
63     ul>
64  
65 body>
66 html>

添加图标

可以为菜单项添加图标,这是通过 定义不同的CSS类来添加的。

1
2 <html lang="en">
3 <head>
4     <meta charset="utf-8" />
5     <title>jQuery UI Demostitle>
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>

你可能感兴趣的:(教程,jQuery,JavaScript,jQuery教程)