github
Advanced Search
  • Home
  • Pricing and Signup
  • Explore GitHub
  • Blog
  • Login

jquery / jquery-ui

  • Admin
  • Watch Unwatch
  • Fork
  • Your Fork
  • Pull Request
  • Download Source
    • 249
    • 27
  • Source
  • Commits
  • Network (27)
  • Graphs
  • Tree: d4ad2cb

click here to add a description

click here to add a homepage

  • Switch Branches (4)
    • bind
    • master
    • panel
    • tooltip
  • Switch Tags (15)
    • 1.8rc3
    • 1.8rc2
    • 1.8rc1
    • 1.8b1
    • 1.8a2
    • 1.8a1
    • 1.8
    • 1.7
    • 1.6rc6
    • 1.6rc5
    • 1.6rc3
    • 1.6rc2
    • 1.6
    • 1.5.2
    • 1.5.1
  • Comments
Sending Request…

The official jQuery user interface library. — Read more

  Cancel

http://jqueryui.com/

  Cancel
  • Private
  • Read-Only
  • HTTP Read-Only

This URL has Read+Write access

line-endings
jzaefferer (author)
Sat Mar 20 13:51:53 -0700 2010
commit  d4ad2cb837565b16f7a11558a0f94c8c799d8522
tree    f601380d295a741886faca55200f024ffdf984d2
parent  8f680fb347add9f14999a8f5c8e328c4b9a8fe1c
M tests/visual/menu/contextmenu.html 350 ••••
M tests/visual/menu/default.html 236 ••••
M tests/visual/menu/drilldown.html 460 ••••
M tests/visual/menu/nested.html 500 ••••
Txt tests/visual/menu/contextmenu.html
  • View file @ d4ad2cb
... ...
@@ -1,175 +1,175 @@
1  
-<!doctype html>
2  
-<html>
3  
-<head>
4  
-  <title>Menu Visual Test: Default</title>
5  
-  <link rel="stylesheet" href="../visual.css" type="text/css" />
6  
-  <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
7  
-  <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
13  
-  <script type="text/javascript">
14  
-  $(function() {
15  
-    $.fn.themeswitcher && $('<div/>').css({
16  
-      position: "absolute",
17  
-      right: 10,
18  
-      top: 10
19  
-    }).appendTo(document.body).themeswitcher();
20  
-    
21  
-    var menus = $("#menu1, #menu2").menu({
22  
-      selected: function(event, ui) {
23  
-        $("#log").append("<div>Selected " + ui.item.text() + "</div>");
24  
-      }
25  
-    }).hide();
26  
-    
27  
-    
28  
-    $("button").click(function(event) {
29  
-      // TODO required to prevent the click handler below from handling this event
30  
-      event.stopPropagation();
31  
-      $("#menu" + this.id).menu("deactivate").show().position({
32  
-        my: "left top",
33  
-        at: "right top",
34  
-        of: event.pageX > 0 ? event : this
35  
-      });
36  
-      $(document).one("click", function() {
37  
-        menus.hide();
38  
-      })
39  
-    }).keydown(function(event) {
40  
-      var menu = $("#menu" + this.id).data("menu");
41  
-      if (menu.widget().is(":hidden"))
42  
-        return;
43  
-      event.stopPropagation();
44  
-      switch (event.keyCode) {
45  
-      case $.ui.keyCode.PAGE_UP:
46  
-        menu.previousPage();
47  
-        break;
48  
-      case $.ui.keyCode.PAGE_DOWN:
49  
-        menu.nextPage();
50  
-        break;
51  
-      case $.ui.keyCode.UP:
52  
-        menu.previous();
53  
-        break;
54  
-      case $.ui.keyCode.DOWN:
55  
-        menu.next();
56  
-        event.preventDefault();
57  
-        break;
58  
-      case $.ui.keyCode.ENTER:
59  
-      case $.ui.keyCode.TAB:
60  
-        menu.select();
61  
-        menu.widget().hide();
62  
-        event.preventDefault();
63  
-        break;
64  
-      case $.ui.keyCode.ESCAPE:
65  
-        menu.widget().hide();
66  
-        break;
67  
-      default:
68  
-        clearTimeout(menu.filterTimer);
69  
-        var prev = menu.previousFilter || "";
70  
-        var character = String.fromCharCode(event.keyCode);
71  
-        var skip = false;
72  
-        if (character == prev) {
73  
-          skip = true;
74  
-        } else {
75  
-          character = prev + character;
76  
-        }
77  
-        
78  
-        var match = menu.widget().children("li").filter(function() {
79  
-          return new RegExp("^" + character, "i").test($(this).text());
80  
-        });
81  
-        var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
82  
-        if (!match.length) {
83  
-          character = String.fromCharCode(event.keyCode);
84  
-          match = menu.widget().children("li").filter(function() {
85  
-            return new RegExp("^" + character, "i").test($(this).text());
86  
-          });
87  
-        }
88  
-        if (match.length) {
89  
-          menu.activate(match);
90  
-          if (match.length > 1) {
91  
-            menu.previousFilter = character;
92  
-            menu.filterTimer = setTimeout(function() {
93  
-              delete menu.previousFilter;
94  
-            }, 1000);
95  
-          } else {
96  
-            delete menu.previousFilter;
97  
-          }
98  
-        } else {
99  
-          delete menu.previousFilter;
100  
-        }
101  
-      }
102  
-    });
103  
-  });
104  
-  </script>
105  
-  <style>
106  
-    body { font-size:62.5%; }
107  
-    .ui-menu { width: 200px; position: absolute; }
108  
-    #menu2 { height: 200px; overflow: auto; }
109  
-  </style>
110  
-</head>
111  
-<body>
112  
-  
113  
-<button id="1">Show context menu 1</button>
114  
-
115  
-<ul id="menu1">
116  
-  <li><a href="#">Amsterdam</a></li>
117  
-  <li><a href="#">Anaheim</a></li>
118  
-  <li><a href="#">Cologne</a></li>
119  
-  <li><a href="#">Frankfurt</a></li>
120  
-  <li><a href="#">Magdeburg</a></li>
121  
-  <li><a href="#">Munich</a></li>
122  
-  <li><a href="#">Utrecht</a></li>
123  
-  <li><a href="#">Zurich</a></li>
124  
-</ul>
125  
-
126  
-<ul id="menu2">
127  
-  <li><a href="#">Aberdeen</a></li>
128  
-  <li><a href="#">Ada</a></li>
129  
-  <li><a href="#">Adamsville</a></li>
130  
-  <li><a href="#">Addyston</a></li>
131  
-  <li><a href="#">Adelphi</a></li>
132  
-  <li><a href="#">Adena</a></li>
133  
-  <li><a href="#">Adrian</a></li>
134  
-  <li><a href="#">Akron</a></li>
135  
-  <li><a href="#">Albany</a></li>
136  
-  <li><a href="#">Alexandria</a></li>
137  
-  <li><a href="#">Alger</a></li>
138  
-  <li><a href="#">Alledonia</a></li>
139  
-  <li><a href="#">Alliance</a></li>
140  
-  <li><a href="#">Alpha</a></li>
141  
-  <li><a href="#">Alvada</a></li>
142  
-  <li><a href="#">Alvordton</a></li>
143  
-  <li><a href="#">Amanda</a></li>
144  
-  <li><a href="#">Amelia</a></li>
145  
-  <li><a href="#">Amesville</a></li>
146  
-  <li><a href="#">Aberdeen</a></li>
147  
-  <li><a href="#">Ada</a></li>
148  
-  <li><a href="#">Adamsville</a></li>
149  
-  <li><a href="#">Addyston</a></li>
150  
-  <li><a href="#">Adelphi</a></li>
151  
-  <li><a href="#">Adena</a></li>
152  
-  <li><a href="#">Adrian</a></li>
153  
-  <li><a href="#">Akron</a></li>
154  
-  <li><a href="#">Albany</a></li>
155  
-  <li><a href="#">Alexandria</a></li>
156  
-  <li><a href="#">Alger</a></li>
157  
-  <li><a href="#">Alledonia</a></li>
158  
-  <li><a href="#">Alliance</a></li>
159  
-  <li><a href="#">Alpha</a></li>
160  
-  <li><a href="#">Alvada</a></li>
161  
-  <li><a href="#">Alvordton</a></li>
162  
-  <li><a href="#">Amanda</a></li>
163  
-  <li><a href="#">Amelia</a></li>
164  
-  <li><a href="#">Amesville</a></li>
165  
-</ul>
166  
-
167  
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
168  
-  Log:
169  
-  <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
170  
-</div>
171  
-
172  
-<button id="2">Show context menu 2</button>
173  
-
174  
-</body>
175  
-</html>
  1
+<!doctype html>
  2
+<html>
  3
+<head>
  4
+  <title>Menu Visual Test: Default</title>
  5
+  <link rel="stylesheet" href="../visual.css" type="text/css" />
  6
+  <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
  7
+  <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
  8
+  <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
  9
+  <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
  10
+  <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
  11
+  <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
  13
+  <script type="text/javascript">
  14
+  $(function() {
  15
+    $.fn.themeswitcher && $('<div/>').css({
  16
+      position: "absolute",
  17
+      right: 10,
  18
+      top: 10
  19
+    }).appendTo(document.body).themeswitcher();
  20
+    
  21
+    var menus = $("#menu1, #menu2").menu({
  22
+      selected: function(event, ui) {
  23
+        $("#log").append("<div>Selected " + ui.item.text() + "</div>");
  24
+      }
  25
+    }).hide();
  26
+    
  27
+    
  28
+    $("button").click(function(event) {
  29
+      // TODO required to prevent the click handler below from handling this event
  30
+      event.stopPropagation();
  31
+      $("#menu" + this.id).menu("deactivate").show().position({
  32
+        my: "left top",
  33
+        at: "right top",
  34
+        of: event.pageX > 0 ? event : this
  35
+      });
  36
+      $(document).one("click", function() {
  37
+        menus.hide();
  38
+      })
  39
+    }).keydown(function(event) {
  40
+      var menu = $("#menu" + this.id).data("menu");
  41
+      if (menu.widget().is(":hidden"))
  42
+        return;
  43
+      event.stopPropagation();
  44
+      switch (event.keyCode) {
  45
+      case $.ui.keyCode.PAGE_UP:
  46
+        menu.previousPage();
  47
+        break;
  48
+      case $.ui.keyCode.PAGE_DOWN:
  49
+        menu.nextPage();
  50
+        break;
  51
+      case $.ui.keyCode.UP:
  52
+        menu.previous();
  53
+        break;
  54
+      case $.ui.keyCode.DOWN:
  55
+        menu.next();
  56
+        event.preventDefault();
  57
+        break;
  58
+      case $.ui.keyCode.ENTER:
  59
+      case $.ui.keyCode.TAB:
  60
+        menu.select();
  61
+        menu.widget().hide();
  62
+        event.preventDefault();
  63
+        break;
  64
+      case $.ui.keyCode.ESCAPE:
  65
+        menu.widget().hide();
  66
+        break;
  67
+      default:
  68
+        clearTimeout(menu.filterTimer);
  69
+        var prev = menu.previousFilter || "";
  70
+        var character = String.fromCharCode(event.keyCode);
  71
+        var skip = false;
  72
+        if (character == prev) {
  73
+          skip = true;
  74
+        } else {
  75
+          character = prev + character;
  76
+        }
  77
+        
  78
+        var match = menu.widget().children("li").filter(function() {
  79
+          return new RegExp("^" + character, "i").test($(this).text());
  80
+        });
  81
+        var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
  82
+        if (!match.length) {
  83
+          character = String.fromCharCode(event.keyCode);
  84
+          match = menu.widget().children("li").filter(function() {
  85
+            return new RegExp("^" + character, "i").test($(this).text());
  86
+          });
  87
+        }
  88
+        if (match.length) {
  89
+          menu.activate(match);
  90
+          if (match.length > 1) {
  91
+            menu.previousFilter = character;
  92
+            menu.filterTimer = setTimeout(function() {
  93
+              delete menu.previousFilter;
  94
+            }, 1000);
  95
+          } else {
  96
+            delete menu.previousFilter;
  97
+          }
  98
+        } else {
  99
+          delete menu.previousFilter;
  100
+        }
  101
+      }
  102
+    });
  103
+  });
  104
+  </script>
  105
+  <style>
  106
+    body { font-size:62.5%; }
  107
+    .ui-menu { width: 200px; position: absolute; }
  108
+    #menu2 { height: 200px; overflow: auto; }
  109
+  </style>
  110
+</head>
  111
+<body>
  112
+  
  113
+<button id="1">Show context menu 1</button>
  114
+
  115
+<ul id="menu1">
  116
+  <li><a href="#">Amsterdam</a></li>
  117
+  <li><a href="#">Anaheim</a></li>
  118
+  <li><a href="#">Cologne</a></li>
  119
+  <li><a href="#">Frankfurt</a></li>
  120
+  <li><a href="#">Magdeburg</a></li>
  121
+  <li><a href="#">Munich</a></li>
  122
+  <li><a href="#">Utrecht</a></li>
  123
+  <li><a href="#">Zurich</a></li>
  124
+</ul>
  125
+
  126
+<ul id="menu2">
  127
+  <li><a href="#">Aberdeen</a></li>
  128
+  <li><a href="#">Ada</a></li>
  129
+  <li><a href="#">Adamsville</a></li>
  130
+  <li><a href="#">Addyston</a></li>
  131
+  <li><a href="#">Adelphi</a></li>
  132
+  <li><a href="#">Adena</a></li>
  133
+  <li><a href="#">Adrian</a></li>
  134
+  <li><a href="#">Akron</a></li>
  135
+  <li><a href="#">Albany</a></li>
  136
+  <li><a href="#">Alexandria</a></li>
  137
+  <li><a href="#">Alger</a></li>
  138
+  <li><a href="#">Alledonia</a></li>
  139
+  <li><a href="#">Alliance</a></li>
  140
+  <li><a href="#">Alpha</a></li>
  141
+  <li><a href="#">Alvada</a></li>
  142
+  <li><a href="#">Alvordton</a></li>
  143
+  <li><a href="#">Amanda</a></li>
  144
+  <li><a href="#">Amelia</a></li>
  145
+  <li><a href="#">Amesville</a></li>
  146
+  <li><a href="#">Aberdeen</a></li>
  147
+  <li><a href="#">Ada</a></li>
  148
+  <li><a href="#">Adamsville</a></li>
  149
+  <li><a href="#">Addyston</a></li>
  150
+  <li><a href="#">Adelphi</a></li>
  151
+  <li><a href="#">Adena</a></li>
  152
+  <li><a href="#">Adrian</a></li>
  153
+  <li><a href="#">Akron</a></li>
  154
+  <li><a href="#">Albany</a></li>
  155
+  <li><a href="#">Alexandria</a></li>
  156
+  <li><a href="#">Alger</a></li>
  157
+  <li><a href="#">Alledonia</a></li>
  158
+  <li><a href="#">Alliance</a></li>
  159
+  <li><a href="#">Alpha</a></li>
  160
+  <li><a href="#">Alvada</a></li>
  161
+  <li><a href="#">Alvordton</a></li>
  162
+  <li><a href="#">Amanda</a></li>
  163
+  <li><a href="#">Amelia</a></li>
  164
+  <li><a href="#">Amesville</a></li>
  165
+</ul>
  166
+
  167
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  168
+  Log:
  169
+  <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
  170
+</div>
  171
+
  172
+<button id="2">Show context menu 2</button>
  173
+
  174
+</body>
  175
+</html>
Txt tests/visual/menu/default.html
  • View file @ d4ad2cb
... ...
@@ -1,118 +1,118 @@
1  
-<!doctype html>
2  
-<html>
3  
-<head>
4  
-  <title>Menu Visual Test: Default</title>
5  
-  <link rel="stylesheet" href="../visual.css" type="text/css" />
6  
-  <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
7  
-  <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
11  
-  <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
12  
-  <script type="text/javascript">
13  
-  $(function() {
14  
-    $.fn.themeswitcher && $('<div/>').css({
15  
-      position: "absolute",
16  
-      right: 10,
17  
-      top: 10
18  
-    }).appendTo(document.body).themeswitcher();
19  
-    
20  
-    var menus = $("#menu1, #menu2").menu({
21  
-      selected: function(event, ui) {
22  
-        $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
23  
-      }
24  
-    }).keydown(function(event) {
25  
-      var menu = $(this).data("menu");
26  
-      if (menu.widget().is(":hidden"))
27  
-        return;
28  
-      event.stopPropagation();
29  
-      switch (event.keyCode) {
30  
-      case $.ui.keyCode.PAGE_UP:
31  
-        menu.previousPage();
32  
-        event.preventDefault();
33  
-        break;
34  
-      case $.ui.keyCode.PAGE_DOWN:
35  
-        menu.nextPage();
36  
-        event.preventDefault();
37  
-        break;
38  
-      case $.ui.keyCode.UP:
39  
-        menu.previous();
40  
-        event.preventDefault();
41  
-        break;
42  
-      case $.ui.keyCode.DOWN:
43  
-        menu.next();
44  
-        event.preventDefault();
45  
-        break;
46  
-      case $.ui.keyCode.ENTER:
47  
-        menu.select();
48  
-        event.preventDefault();
49  
-        break;
50  
-      }
51  
-    });
52  
-
53  
-  });
54  
-  </script>
55  
-  <style>
56  
-    body { font-size:62.5%; }
57  
-    .ui-menu { width: 200px; }
58  
-    #menu2 { height: 200px; overflow: auto; }
59  
-  </style>
60  
-</head>
61  
-<body>
62  
-  
63  
-<ul id="menu1" tabindex="0">
64  
-  <li><a href="#">Aberdeen</a></li>
65  
-  <li><a href="#">Ada</a></li>
66  
-  <li><a href="#">Adamsville</a></li>
67  
-  <li><a href="#">Addyston</a></li>
68  
-  <li><a href="#">Adelphi</a></li>
69  
-</ul>
70  
-
71  
-<ul id="menu2" tabindex="0">
72  
-  <li><a href="#">Aberdeen</a></li>
73  
-  <li><a href="#">Ada</a></li>
74  
-  <li><a href="#">Adamsville</a></li>
75  
-  <li><a href="#">Addyston</a></li>
76  
-  <li><a href="#">Adelphi</a></li>
77  
-  <li><a href="#">Adena</a></li>
78  
-  <li><a href="#">Adrian</a></li>
79  
-  <li><a href="#">Akron</a></li>
80  
-  <li><a href="#">Albany</a></li>
81  
-  <li><a href="#">Alexandria</a></li>
82  
-  <li><a href="#">Alger</a></li>
83  
-  <li><a href="#">Alledonia</a></li>
84  
-  <li><a href="#">Alliance</a></li>
85  
-  <li><a href="#">Alpha</a></li>
86  
-  <li><a href="#">Alvada</a></li>
87  
-  <li><a href="#">Alvordton</a></li>
88  
-  <li><a href="#">Amanda</a></li>
89  
-  <li><a href="#">Amelia</a></li>
90  
-  <li><a href="#">Amesville</a></li>
91  
-  <li><a href="#">Aberdeen</a></li>
92  
-  <li><a href="#">Ada</a></li>
93  
-  <li><a href="#">Adamsville</a></li>
94  
-  <li><a href="#">Addyston</a></li>
95  
-  <li><a href="#">Adelphi</a></li>
96  
-  <li><a href="#">Adena</a></li>
97  
-  <li><a href="#">Adrian</a></li>
98  
-  <li><a href="#">Akron</a></li>
99  
-  <li><a href="#">Albany</a></li>
100  
-  <li><a href="#">Alexandria</a></li>
101  
-  <li><a href="#">Alger</a></li>
102  
-  <li><a href="#">Alledonia</a></li>
103  
-  <li><a href="#">Alliance</a></li>
104  
-  <li><a href="#">Alpha</a></li>
105  
-  <li><a href="#">Alvada</a></li>
106  
-  <li><a href="#">Alvordton</a></li>
107  
-  <li><a href="#">Amanda</a></li>
108  
-  <li><a href="#">Amelia</a></li>
109  
-  <li><a href="#">Amesville</a></li>
110  
-</ul>
111  
-
112  
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
113  
-  Log:
114  
-  <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
115  
-</div>
116  
-
117  
-</body>
118  
-</html>
  1
+<!doctype html>
  2
+<html>
  3
+<head>
  4
+  <title>Menu Visual Test: Default</title>
  5
+  <link rel="stylesheet" href="../visual.css" type="text/css" />
  6
+  <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
  7
+  <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
  8
+  <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
  9
+  <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
  10
+  <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
  11
+  <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
  12
+  <script type="text/javascript">
  13
+  $(function() {
  14
+    $.fn.themeswitcher && $('<div/>').css({
  15
+      position: "absolute",
  16
+      right: 10,
  17
+      top: 10
  18
+    }).appendTo(document.body).themeswitcher();
  19
+    
  20
+    var menus = $("#menu1, #menu2").menu({
  21
+      selected: function(event, ui) {
  22
+        $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
  23
+      }
  24
+    }).keydown(function(event) {
  25
+      var menu = $(this).data("menu");
  26
+      if (menu.widget().is(":hidden"))
  27
+        return;
  28
+      event.stopPropagation();
  29
+      switch (event.keyCode) {
  30
+      case $.ui.keyCode.PAGE_UP:
  31
+        menu.previousPage();
  32
+        event.preventDefault();
  33
+        break;
  34
+      case $.ui.keyCode.PAGE_DOWN:
  35
+        menu.nextPage();
  36
+        event.preventDefault();
  37
+        break;
  38
+      case $.ui.keyCode.UP:
  39
+        menu.previous();
  40
+        event.preventDefault();
  41
+        break;
  42
+      case $.ui.keyCode.DOWN:
  43
+        menu.next();
  44
+        event.preventDefault();
  45
+        break;
  46
+      case $.ui.keyCode.ENTER:
  47
+        menu.select();
  48
+        event.preventDefault();
  49
+        break;
  50
+      }
  51
+    });
  52
+
  53
+  });
  54
+  </script>
  55
+  <style>
  56
+    body { font-size:62.5%; }
  57
+    .ui-menu { width: 200px; }
  58
+    #menu2 { height: 200px; overflow: auto; }
  59
+  </style>
  60
+</head>
  61
+<body>
  62
+  
  63
+<ul id="menu1" tabindex="0">
  64
+  <li><a href="#">Aberdeen</a></li>
  65
+  <li><a href="#">Ada</a></li>
  66
+  <li><a href="#">Adamsville</a></li>
  67
+  <li><a href="#">Addyston</a></li>
  68
+  <li><a href="#">Adelphi</a></li>
  69
+</ul>
  70
+
  71
+<ul id="menu2" tabindex="0">
  72
+  <li><a href="#">Aberdeen</a></li>
  73
+  <li><a href="#">Ada</a></li>
  74
+  <li><a href="#">Adamsville</a></li>
  75
+  <li><a href="#">Addyston</a></li>
  76
+  <li><a href="#">Adelphi</a></li>
  77
+  <li><a href="#">Adena</a></li>
  78
+  <li><a href="#">Adrian</a></li>
  79
+  <li><a href="#">Akron</a></li>
  80
+  <li><a href="#">Albany</a></li>
  81
+  <li><a href="#">Alexandria</a></li>
  82
+  <li><a href="#">Alger</a></li>
  83
+  <li><a href="#">Alledonia</a></li>
  84
+  <li><a href="#">Alliance</a></li>
  85
+  <li><a href="#">Alpha</a></li>
  86
+  <li><a href="#">Alvada</a></li>
  87
+  <li><a href="#">Alvordton</a></li>
  88
+  <li><a href="#">Amanda</a></li>
  89
+  <li><a href="#">Amelia</a></li>
  90
+  <li><a href="#">Amesville</a></li>
  91
+  <li><a href="#">Aberdeen</a></li>
  92
+  <li><a href="#">Ada</a></li>
  93
+  <li><a href="#">Adamsville</a></li>
  94
+  <li><a href="#">Addyston</a></li>
  95
+  <li><a href="#">Adelphi</a></li>
  96
+  <li><a href="#">Adena</a></li>
  97
+  <li><a href="#">Adrian</a></li>
  98
+  <li><a href="#">Akron</a></li>
  99
+  <li><a href="#">Albany</a></li>
  100
+  <li><a href="#">Alexandria</a></li>
  101
+  <li><a href="#">Alger</a></li>
  102
+  <li><a href="#">Alledonia</a></li>
  103
+  <li><a href="#">Alliance</a></li>
  104
+  <li><a href="#">Alpha</a></li>
  105
+  <li><a href="#">Alvada</a></li>
  106
+  <li><a href="#">Alvordton</a></li>
  107
+  <li><a href="#">Amanda</a></li>
  108
+  <li><a href="#">Amelia</a></li>
  109
+  <li><a href="#">Amesville</a></li>
  110
+</ul>
  111
+
  112
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  113
+  Log:
  114
+  <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
  115
+</div>
  116
+
  117
+</body>
  118
+</html>
Txt tests/visual/menu/drilldown.html
  • View file @ d4ad2cb
... ...
@@ -1,230 +1,230 @@
1  
-<!doctype html>
2  
-<html>
3  
-<head>
4  
-  <title>Menu Visual Test: Default</title>
5  
-  <link rel="stylesheet" href="../visual.css" type="text/css" />
6  
-  <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
7  
-  <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <script type="text/javascript">
13  
-  $(function() {
14  
-    $.widget("ui.drilldown", {
15  
-      _init: function() {
16  
-        var self = this;
17  
-        this.active = this.element;
18  
-        
19  
-        // hide submenus and create indicator icons
20  
-        this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show();  
21  
-        
22  
-        this.element.find("ul").menu({
23  
-          selected: function(event, ui) {
24  
-            var nested = $(">ul", ui.item);
25  
-            if (!nested.length) {
26  
-              self.element.find("h3").text(ui.item.text());
27  
-              self.options.selected.apply(this, arguments);
28  
-              return;
29  
-            }
30  
-            self.active = ui.item.parent();
31  
-            // put a previous submenu back into its place and hide it
32  
-            self.hideDown();
33  
-            if (nested.length) {
34  
-              // append to body in order to display the submenu above the parent menu, instead of inside of it
35  
-              nested.appendTo(document.body).menu("deactivate").show().position({
36  
-                my: "left top",
37  
-                at: "left top",
38  
-                of: self.element.children("ul:first")
39  
-              // store the current submenu
40  
-              }).data("menuparent", ui.item);
41  
-              
42  
-              self.active.data("submenu", nested);
43  
-            }
44  
-          }
45  
-        });
46  
-      },
47  
-      
48  
-      up: function() {
49  
-        if (!this.active.data("menuparent"))
50  
-          return;
51  
-        this.hideDown();
52  
-        this.active.menu("deactivate");
53  
-        this.active = this.active.data("menuparent").parent();
54  
-      },
55  
-      
56  
-      down: function() {
57  
-        var submenu = this.active.data("submenu");
58  
-        if (!submenu)
59  
-          return;
60  
-        submenu.data("menu").activate(submenu.children(":first"))
61  
-        this.active = submenu;
62  
-      },
63  
-      
64  
-      show: function() {
65  
-        this.element.menu("deactivate").show();
66  
-        this.active = this.element;
67  
-      },
68  
-      
69  
-      hide: function() {
70  
-        this.hideDown();
71  
-        var child = this.active.hide(), parent;
72  
-        while(child.data("menuparent")) {
73  
-          parent = child.data("menuparent");
74  
-          child.appendTo(parent).removeData("menuparent");
75  
-          child = parent.parent().removeData("submenu").hide();
76  
-        }
77  
-      },
78  
-      
79  
-      hideDown: function() {
80  
-        var submenu = this.active.data("submenu");
81  
-        while(submenu) {
82  
-          var parent = submenu.data("menuparent");
83  
-          submenu.appendTo(parent).hide().removeData("menuparent");
84  
-          parent.parent().removeData("submenu");
85  
-          submenu = submenu.data("submenu");
86  
-        };
87  
-      }
88  
-    });
89  
-    
90  
-    var nestedmenu = $("#drilldown").drilldown({
91  
-      selected: function(event, ui) {
92  
-        $("#log").append("<div>Selected " + ui.item.text() + "</div>");
93  
-      }
94  
-    });
95  
-    
96  
-    $().keydown(function(event) {
97  
-      var menu = nestedmenu.data("drilldown").active.data("menu");
98  
-      if (menu.widget().is(":hidden"))
99  
-        return;
100  
-      event.stopPropagation();
101  
-      switch (event.keyCode) {
102  
-      case $.ui.keyCode.PAGE_UP:
103  
-        menu.previousPage();
104  
-        break;
105  
-      case $.ui.keyCode.PAGE_DOWN:
106  
-        menu.nextPage();
107  
-        break;
108  
-      case $.ui.keyCode.UP:
109  
-        menu.previous();
110  
-        break;
111  
-      case $.ui.keyCode.LEFT:
112  
-        nestedmenu.nestedmenu("up");
113  
-        break;
114  
-      case $.ui.keyCode.RIGHT:
115  
-        nestedmenu.nestedmenu("down");
116  
-        break;
117  
-      case $.ui.keyCode.DOWN:
118  
-        menu.next();
119  
-        event.preventDefault();
120  
-        break;
121  
-      case $.ui.keyCode.ENTER:
122  
-      case $.ui.keyCode.TAB:
123  
-        menu.select();
124  
-        nestedmenu.nestedmenu("hide");
125  
-        event.preventDefault();
126  
-        break;
127  
-      case $.ui.keyCode.ESCAPE:
128  
-        nestedmenu.nestedmenu("hide");
129  
-        break;
130  
-      default:
131  
-        clearTimeout(menu.filterTimer);
132  
-        var prev = menu.previousFilter || "";
133  
-        var character = String.fromCharCode(event.keyCode);
134  
-        var skip = false;
135  
-        if (character == prev) {
136  
-          skip = true;
137  
-        } else {
138  
-          character = prev + character;
139  
-        }
140  
-        
141  
-        var match = menu.widget().children("li").filter(function() {
142  
-          return new RegExp("^" + character, "i").test($("a", this).text());
143  
-        });
144  
-        var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
145  
-        if (!match.length) {
146  
-          character = String.fromCharCode(event.keyCode);
147  
-          match = menu.widget().children("li").filter(function() {
148  
-            return new RegExp("^" + character, "i").test($(this).text());
149  
-          });
150  
-        }
151  
-        if (match.length) {
152  
-          menu.activate(match);
153  
-          if (match.length > 1) {
154  
-            menu.previousFilter = character;
155  
-            menu.filterTimer = setTimeout(function() {
156  
-              delete menu.previousFilter;
157  
-            }, 1000);
158  
-          } else {
159  
-            delete menu.previousFilter;
160  
-          }
161  
-        } else {
162  
-          delete menu.previousFilter;
163  
-        }
164  
-      }
165  
-    });
166  
-  });
167  
-  </script>
168  
-  <style>
169  
-    body { font-size:62.5%; }
170  
-    .ui-menu { width: 200px; height: 170px; }
171  
-    .ui-menu .ui-icon { float: right; }
172  
-  </style>
173  
-</head>
174  
-<body>
175  
-  
176  
-<div id="drilldown">
177  
-  <h3>Make a selection...</h3>
178  
-  <ul>
179  
-    <li>
180  
-      <a href="#">Amsterdam</a>
181  
-      <ul>
182  
-        <li><a href="#">Aberdeen</a></li>
183  
-        <li><a href="#">Ada</a></li>
184  
-        <li>
185  
-          <a href="#">Adamsville</a>
186  
-          <ul>
187  
-            <li><a href="#">Anaheim</a></li>
188  
-            <li>
189  
-              <a href="#">Cologne</a>
190  
-              <ul>
191  
-                <li><a href="#">Mberdeen</a></li>
192  
-                <li><a href="#">Mda</a></li>
193  
-                <li><a href="#">Mdamsville</a></li>
194  
-                <li><a href="#">Mddyston</a></li>
195  
-                <li><a href="#">Mmesville</a></li>
196  
-              </ul>
197  
-            </li>
198  
-            <li><a href="#">Frankfurt</a></li>
199  
-          </ul>
200  
-        </li>
201  
-        <li><a href="#">Addyston</a></li>
202  
-        <li><a href="#">Amesville</a></li>
203  
-      </ul>
204  
-    </li>
205  
-    <li><a href="#">Anaheim</a></li>
206  
-    <li><a href="#">Cologne</a></li>
207  
-    <li><a href="#">Frankfurt</a></li>
208  
-    <li>
209  
-      <a href="#">Magdeburg</a>
210  
-      <ul>
211  
-        <li><a href="#">Mberdeen</a></li>
212  
-        <li><a href="#">Mda</a></li>
213  
-        <li><a href="#">Mdamsville</a></li>
214  
-        <li><a href="#">Mddyston</a></li>
215  
-        <li><a href="#">Mmesville</a></li>
216  
-      </ul>
217  
-    </li>
218  
-    <li><a href="#">Munich</a></li>
219  
-    <li><a href="#">Utrecht</a></li>
220  
-    <li><a href="#">Zurich</a></li>
221  
-  </ul>
222  
-</div>
223  
-
224  
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
225  
-  Log:
226  
-  <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
227  
-</div>
228  
-
229  
-</body>
230  
-</html>
  1
+<!doctype html>
  2
+<html>
  3
+<head>
  4
+  <title>Menu Visual Test: Default</title>
  5
+  <link rel="stylesheet" href="../visual.css" type="text/css" />
  6
+  <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
  7
+  <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
  8
+  <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
  9
+  <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
  10
+  <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
  11
+  <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <script type="text/javascript">
  13
+  $(function() {
  14
+    $.widget("ui.drilldown", {
  15
+      _init: function() {
  16
+        var self = this;
  17
+        this.active = this.element;
  18
+        
  19
+        // hide submenus and create indicator icons
  20
+        this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show();  
  21
+        
  22
+        this.element.find("ul").menu({
  23
+          selected: function(event, ui) {
  24
+            var nested = $(">ul", ui.item);
  25
+            if (!nested.length) {
  26
+              self.element.find("h3").text(ui.item.text());
  27
+              self.options.selected.apply(this, arguments);
  28
+              return;
  29
+            }
  30
+            self.active = ui.item.parent();
  31
+            // put a previous submenu back into its place and hide it
  32
+            self.hideDown();
  33
+            if (nested.length) {
  34
+              // append to body in order to display the submenu above the parent menu, instead of inside of it
  35
+              nested.appendTo(document.body).menu("deactivate").show().position({
  36
+                my: "left top",
  37
+                at: "left top",
  38
+                of: self.element.children("ul:first")
  39
+              // store the current submenu
  40
+              }).data("menuparent", ui.item);
  41
+              
  42
+              self.active.data("submenu", nested);
  43
+            }
  44
+          }
  45
+        });
  46
+      },
  47
+      
  48
+      up: function() {
  49
+        if (!this.active.data("menuparent"))
  50
+          return;
  51
+        this.hideDown();
  52
+        this.active.menu("deactivate");
  53
+        this.active = this.active.data("menuparent").parent();
  54
+      },
  55
+      
  56
+      down: function() {
  57
+        var submenu = this.active.data("submenu");
  58
+        if (!submenu)
  59
+          return;
  60
+        submenu.data("menu").activate(submenu.children(":first"))
  61
+        this.active = submenu;
  62
+      },
  63
+      
  64
+      show: function() {
  65
+        this.element.menu("deactivate").show();
  66
+        this.active = this.element;
  67
+      },
  68
+      
  69
+      hide: function() {
  70
+        this.hideDown();
  71
+        var child = this.active.hide(), parent;
  72
+        while(child.data("menuparent")) {
  73
+          parent = child.data("menuparent");
  74
+          child.appendTo(parent).removeData("menuparent");
  75
+          child = parent.parent().removeData("submenu").hide();
  76
+        }
  77
+      },
  78
+      
  79
+      hideDown: function() {
  80
+        var submenu = this.active.data("submenu");
  81
+        while(submenu) {
  82
+          var parent = submenu.data("menuparent");
  83
+          submenu.appendTo(parent).hide().removeData("menuparent");
  84
+          parent.parent().removeData("submenu");
  85
+          submenu = submenu.data("submenu");
  86
+        };
  87
+      }
  88
+    });
  89
+    
  90
+    var nestedmenu = $("#drilldown").drilldown({
  91
+      selected: function(event, ui) {
  92
+        $("#log").append("<div>Selected " + ui.item.text() + "</div>");
  93
+      }
  94
+    });
  95
+    
  96
+    $().keydown(function(event) {
  97
+      var menu = nestedmenu.data("drilldown").active.data("menu");
  98
+      if (menu.widget().is(":hidden"))
  99
+        return;
  100
+      event.stopPropagation();
  101
+      switch (event.keyCode) {
  102
+      case $.ui.keyCode.PAGE_UP:
  103
+        menu.previousPage();
  104
+        break;
  105
+      case $.ui.keyCode.PAGE_DOWN:
  106
+        menu.nextPage();
  107
+        break;
  108
+      case $.ui.keyCode.UP:
  109
+        menu.previous();
  110
+        break;
  111
+      case $.ui.keyCode.LEFT:
  112
+        nestedmenu.nestedmenu("up");
  113
+        break;
  114
+      case $.ui.keyCode.RIGHT:
  115
+        nestedmenu.nestedmenu("down");
  116
+        break;
  117
+      case $.ui.keyCode.DOWN:
  118
+        menu.next();
  119
+        event.preventDefault();
  120
+        break;
  121
+      case $.ui.keyCode.ENTER:
  122
+      case $.ui.keyCode.TAB:
  123
+        menu.select();
  124
+        nestedmenu.nestedmenu("hide");
  125
+        event.preventDefault();
  126
+        break;
  127
+      case $.ui.keyCode.ESCAPE:
  128
+        nestedmenu.nestedmenu("hide");
  129
+        break;
  130
+      default:
  131
+        clearTimeout(menu.filterTimer);
  132
+        var prev = menu.previousFilter || "";
  133
+        var character = String.fromCharCode(event.keyCode);
  134
+        var skip = false;
  135
+        if (character == prev) {
  136
+          skip = true;
  137
+        } else {
  138
+          character = prev + character;
  139
+        }
  140
+        
  141
+        var match = menu.widget().children("li").filter(function() {
  142
+          return new RegExp("^" + character, "i").test($("a", this).text());
  143
+        });
  144
+        var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
  145
+        if (!match.length) {
  146
+          character = String.fromCharCode(event.keyCode);
  147
+          match = menu.widget().children("li").filter(function() {
  148
+            return new RegExp("^" + character, "i").test($(this).text());
  149
+          });
  150
+        }
  151
+        if (match.length) {
  152
+          menu.activate(match);
  153
+          if (match.length > 1) {
  154
+            menu.previousFilter = character;
  155
+            menu.filterTimer = setTimeout(function() {
  156
+              delete menu.previousFilter;
  157
+            }, 1000);
  158
+          } else {
  159
+            delete menu.previousFilter;
  160
+          }
  161
+        } else {
  162
+          delete menu.previousFilter;
  163
+        }
  164
+      }
  165
+    });
  166
+  });
  167
+  </script>
  168
+  <style>
  169
+    body { font-size:62.5%; }
  170
+    .ui-menu { width: 200px; height: 170px; }
  171
+    .ui-menu .ui-icon { float: right; }
  172
+  </style>
  173
+</head>
  174
+<body>
  175
+  
  176
+<div id="drilldown">
  177
+  <h3>Make a selection...</h3>
  178
+  <ul>
  179
+    <li>
  180
+      <a href="#">Amsterdam</a>
  181
+      <ul>
  182
+        <li><a href="#">Aberdeen</a></li>
  183
+        <li><a href="#">Ada</a></li>
  184
+        <li>
  185
+          <a href="#">Adamsville</a>
  186
+          <ul>
  187
+            <li><a href="#">Anaheim</a></li>
  188
+            <li>
  189
+              <a href="#">Cologne</a>
  190
+              <ul>
  191
+                <li><a href="#">Mberdeen</a></li>
  192
+                <li><a href="#">Mda</a></li>
  193
+                <li><a href="#">Mdamsville</a></li>
  194
+                <li><a href="#">Mddyston</a></li>
  195
+                <li><a href="#">Mmesville</a></li>
  196
+              </ul>
  197
+            </li>
  198
+            <li><a href="#">Frankfurt</a></li>
  199
+          </ul>
  200
+        </li>
  201
+        <li><a href="#">Addyston</a></li>
  202
+        <li><a href="#">Amesville</a></li>
  203
+      </ul>
  204
+    </li>
  205
+    <li><a href="#">Anaheim</a></li>
  206
+    <li><a href="#">Cologne</a></li>
  207
+    <li><a href="#">Frankfurt</a></li>
  208
+    <li>
  209
+      <a href="#">Magdeburg</a>
  210
+      <ul>
  211
+        <li><a href="#">Mberdeen</a></li>
  212
+        <li><a href="#">Mda</a></li>
  213
+        <li><a href="#">Mdamsville</a></li>
  214
+        <li><a href="#">Mddyston</a></li>
  215
+        <li><a href="#">Mmesville</a></li>
  216
+      </ul>
  217
+    </li>
  218
+    <li><a href="#">Munich</a></li>
  219
+    <li><a href="#">Utrecht</a></li>
  220
+    <li><a href="#">Zurich</a></li>
  221
+  </ul>
  222
+</div>
  223
+
  224
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  225
+  Log:
  226
+  <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
  227
+</div>
  228
+
  229
+</body>
  230
+</html>
Txt tests/visual/menu/nested.html
  • View file @ d4ad2cb
... ...
@@ -1,250 +1,250 @@
1  
-<!doctype html>
2  
-<html>
3  
-<head>
4  
-  <title>Menu Visual Test: Default</title>
5  
-  <link rel="stylesheet" href="../visual.css" type="text/css" />
6  
-  <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
7  
-  <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <script type="text/javascript">
13  
-  $(function() {
14  
-    $.widget("ui.nestedmenu", {
15  
-      _init: function() {
16  
-        var self = this;
17  
-        this.active = this.element;
18  
-        
19  
-        // hide submenus and create indicator icons
20  
-        this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');  
21  
-        
22  
-        this.element.find("ul").andSelf().menu({
23  
-          selected: this.options.selected,
24  
-          focus: function(event, ui) {
25  
-            self.active = ui.item.parent();
26  
-            self.activeItem = ui.item;
27  
-            // put a previous submenu back into its place and hide it
28  
-            self.hideDown();
29  
-            var nested = $(">ul", ui.item);
30  
-            // only for mouse-events (should actually check event.originalEvent.type, but for keys, originalEvent is undefined...)
31  
-            if (nested.length && /^mouse/.test(event.originalEvent.type)) {
32  
-              self._openSubmenu(nested, ui.item);
33  
-            }
34  
-          }
35  
-        })
36  
-      },
37  
-      
38  
-      _openSubmenu: function(nested, item) {
39  
-        // append to body in order to display the submenu above the parent menu, instead of inside of it
40  
-        nested.appendTo(document.body).menu("deactivate").show().position({
41  
-          my: "left top",
42  
-          at: "right top",
43  
-          of: item
44  
-        // store the current submenu
45  
-        }).data("menuparent", item);
46  
-        
47  
-        this.active.data("submenu", nested);
48  
-      },
49  
-      
50  
-      up: function(event) {
51  
-        if (!this.active.data("menuparent"))
52  
-          return;
53  
-        this.active.menu("deactivate");
54  
-        this.active = this.active.data("menuparent").parent();
55  
-        this.activeItem = this.active.data("menu").active;
56  
-        this.hideDown();
57  
-      },
58  
-      
59  
-      down: function(event) {
60  
-        var submenu = this.active.data("submenu");
61  
-        if (!submenu && this.activeItem) {
62  
-          // try to open submenu or return(?); only mouseover opens submenu directly, key doesn't
63  
-          var item = this.activeItem,
64  
-            nested = item.children("ul");
65  
-          if (!nested.length)
66  
-            return;
67  
-          this._openSubmenu(nested, item);
68  
-          submenu = this.active.data("submenu");
69  
-        }
70  
-        submenu.data("menu").activate(event, submenu.children(":first"))
71  
-        this.active = submenu;
72  
-      },
73  
-      
74  
-      show: function() {
75  
-        this.element.menu("deactivate").show();
76  
-        this.active = this.element;
77  
-      },
78  
-      
79  
-      hide: function() {
80  
-        this.hideDown();
81  
-        var child = this.active.hide(), parent;
82  
-        while(child.data("menuparent")) {
83  
-          parent = child.data("menuparent");
84  
-          child.appendTo(parent).removeData("menuparent");
85  
-          child = parent.parent().removeData("submenu").hide();
86  
-        }
87  
-      },
88  
-      
89  
-      hideDown: function() {
90  
-        var submenu = this.active.data("submenu");
91  
-        while(submenu) {
92  
-          var parent = submenu.data("menuparent");
93  
-          submenu.appendTo(parent).hide().removeData("menuparent");
94  
-          parent.parent().removeData("submenu");
95  
-          submenu = submenu.data("submenu");
96  
-        };
97  
-      }
98  
-    });
99  
-    
100  
-    var nestedmenu = $("#menu").nestedmenu({
101  
-      selected: function(event, ui) {
102  
-        $("#log").append("<div>Selected " + ui.item.text() + "</div>");
103  
-      }
104  
-    }).hide();
105  
-    
106  
-    $("button").click(function(event) {
107  
-      // TODO required to prevent the click handler below from handling this event
108  
-      event.stopPropagation();
109  
-      nestedmenu.nestedmenu("show").position({
110  
-        my: "left top",
111  
-        at: "right top",
112  
-        of: event.pageX > 0 ? event : this
113  
-      });
114  
-      $(document).one("click", function() {
115  
-        nestedmenu.nestedmenu("hide");
116  
-      })
117  
-    }).keydown(function(event) {
118  
-      var menu = nestedmenu.data("nestedmenu").active.data("menu");
119  
-      if (menu.widget().is(":hidden"))
120  
-        return;
121  
-      event.stopPropagation();
122  
-      switch (event.keyCode) {
123  
-      case $.ui.keyCode.PAGE_UP:
124  
-        menu.previousPage(event);
125  
-        break;
126  
-      case $.ui.keyCode.PAGE_DOWN:
127  
-        menu.nextPage(event);
128  
-        break;
129  
-      case $.ui.keyCode.UP:
130  
-        menu.previous(event);
131  
-        break;
132  
-      case $.ui.keyCode.LEFT:
133  
-        nestedmenu.nestedmenu("up", event);
134  
-        break;
135  
-      case $.ui.keyCode.RIGHT:
136  
-        nestedmenu.nestedmenu("down", event);
137  
-        break;
138  
-      case $.ui.keyCode.DOWN:
139  
-        menu.next(event);
140  
-        event.preventDefault();
141  
-        break;
142  
-      case $.ui.keyCode.ENTER:
143  
-      case $.ui.keyCode.TAB:
144  
-        menu.select();
145  
-        nestedmenu.nestedmenu("hide");
146  
-        event.preventDefault();
147  
-        break;
148  
-      case $.ui.keyCode.ESCAPE:
149  
-        nestedmenu.nestedmenu("hide");
150  
-        break;
151  
-      default:
152  
-        clearTimeout(menu.filterTimer);
153  
-        var prev = menu.previousFilter || "";
154  
-        var character = String.fromCharCode(event.keyCode);
155  
-        var skip = false;
156  
-        if (character == prev) {
157  
-          skip = true;
158  
-        } else {
159  
-          character = prev + character;
160  
-        }
161  
-        
162  
-        var match = menu.widget().children("li").filter(function() {
163  
-          return new RegExp("^" + character, "i").test($("a", this).text());
164  
-        });
165  
-        var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
166  
-        if (!match.length) {
167  
-          character = String.fromCharCode(event.keyCode);
168  
-          match = menu.widget().children("li").filter(function() {
169  
-            return new RegExp("^" + character, "i").test($(this).text());
170  
-          });
171  
-        }
172  
-        if (match.length) {
173  
-          menu.activate(event, match);
174  
-          if (match.length > 1) {
175  
-            menu.previousFilter = character;
176  
-            menu.filterTimer = setTimeout(function() {
177  
-              delete menu.previousFilter;
178  
-            }, 1000);
179  
-          } else {
180  
-            delete menu.previousFilter;
181  
-          }
182  
-        } else {
183  
-          delete menu.previousFilter;
184  
-        }
185  
-      }
186  
-    });
187  
-  });
188  
-  </script>
189  
-  <style>
190  
-    body { font-size:62.5%; }
191  
-    .ui-menu { width: 200px; position: absolute; }
192  
-    .ui-menu .ui-icon { float: right; }
193  
-  </style>
194  
-</head>
195  
-<body>
196  
-  
197  
-<button>Show context menu</button>
198  
-
199  
-<ul id="menu">
200  
-  <li>
201  
-    <a href="#">Amsterdam</a>
202  
-    <ul>
203  
-      <li><a href="#">Aberdeen</a></li>
204  
-      <li><a href="#">Ada</a></li>
205  
-      <li>
206  
-        <a href="#">Adamsville</a>
207  
-        <ul>
208  
-          <li><a href="#">Anaheim</a></li>
209  
-          <li>
210  
-            <a href="#">Cologne</a>
211  
-            <ul>
212  
-              <li><a href="#">Mberdeen</a></li>
213  
-              <li><a href="#">Mda</a></li>
214  
-              <li><a href="#">Mdamsville</a></li>
215  
-              <li><a href="#">Mddyston</a></li>
216  
-              <li><a href="#">Mmesville</a></li>
217  
-            </ul>
218  
-          </li>
219  
-          <li><a href="#">Frankfurt</a></li>
220  
-        </ul>
221  
-      </li>
222  
-      <li><a href="#">Addyston</a></li>
223  
-      <li><a href="#">Amesville</a></li>
224  
-    </ul>
225  
-  </li>
226  
-  <li><a href="#">Anaheim</a></li>
227  
-  <li><a href="#">Cologne</a></li>
228  
-  <li><a href="#">Frankfurt</a></li>
229  
-  <li>
230  
-    <a href="#">Magdeburg</a>
231  
-    <ul>
232  
-      <li><a href="#">Mberdeen</a></li>
233  
-      <li><a href="#">Mda</a></li>
234  
-      <li><a href="#">Mdamsville</a></li>
235  
-      <li><a href="#">Mddyston</a></li>
236  
-      <li><a href="#">Mmesville</a></li>
237  
-    </ul>
238  
-  </li>
239  
-  <li><a href="#">Munich</a></li>
240  
-  <li><a href="#">Utrecht</a></li>
241  
-  <li><a href="#">Zurich</a></li>
242  
-</ul>
243  
-
244  
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
245  
-  Log:
246  
-  <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
247  
-</div>
248  
-
249  
-</body>
250  
-</html>
  1
+<!doctype html>
  2
+<html>
  3
+<head>
  4
+  <title>Menu Visual Test: Default</title>
  5
+  <link rel="stylesheet" href="../visual.css" type="text/css" />
  6
+  <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
  7
+  <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
  8
+  <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
  9
+  <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
  10
+  <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
  11
+  <script type="text/javascript" src="../../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <script type="text/javascript">
  13
+  $(function() {
  14
+    $.widget("ui.nestedmenu", {
  15
+      _init: function() {
  16
+        var self = this;
  17
+        this.active = this.element;
  18
+        
  19
+        // hide submenus and create indicator icons
  20
+        this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');  
  21
+        
  22
+        this.element.find("ul").andSelf().menu({
  23
+          selected: this.options.selected,
  24
+          focus: function(event, ui) {
  25
+            self.active = ui.item.parent();
  26
+            self.activeItem = ui.item;
  27
+            // put a previous submenu back into its place and hide it
  28
+            self.hideDown();
  29
+            var nested = $(">ul", ui.item);
  30
+            // only for mouse-events (should actually check event.originalEvent.type, but for keys, originalEvent is undefined...)
  31
+            if (nested.length && /^mouse/.test(event.originalEvent.type)) {
  32
+              self._openSubmenu(nested, ui.item);
  33
+            }
  34
+          }
  35
+        })
  36
+      },
  37
+      
  38
+      _openSubmenu: function(nested, item) {
  39
+        // append to body in order to display the submenu above the parent menu, instead of inside of it
  40
+        nested.appendTo(document.body).menu("deactivate").show().position({
  41
+          my: "left top",
  42
+          at: "right top",
  43
+          of: item
  44
+        // store the current submenu
  45
+        }).data("menuparent", item);
  46
+        
  47
+        this.active.data("submenu", nested);
  48
+      },
  49
+      
  50
+      up: function(event) {
  51
+        if (!this.active.data("menuparent"))
  52
+          return;
  53
+        this.active.menu("deactivate");
  54
+        this.active = this.active.data("menuparent").parent();
  55
+        this.activeItem = this.active.data("menu").active;
  56
+        this.hideDown();
  57
+      },
  58
+      
  59
+      down: function(event) {
  60
+        var submenu = this.active.data("submenu");
  61
+        if (!submenu && this.activeItem) {
  62
+          // try to open submenu or return(?); only mouseover opens submenu directly, key doesn't
  63
+          var item = this.activeItem,
  64
+            nested = item.children("ul");
  65
+          if (!nested.length)
  66
+            return;
  67
+          this._openSubmenu(nested, item);
  68
+          submenu = this.active.data("submenu");
  69
+        }
  70
+        submenu.data("menu").activate(event, submenu.children(":first"))
  71
+        this.active = submenu;
  72
+      },
  73
+      
  74
+      show: function() {
  75
+        this.element.menu("deactivate").show();
  76
+        this.active = this.element;
  77
+      },
  78
+      
  79
+      hide: function() {
  80
+        this.hideDown();
  81
+        var child = this.active.hide(), parent;
  82
+        while(child.data("menuparent")) {
  83
+          parent = child.data("menuparent");
  84
+          child.appendTo(parent).removeData("menuparent");
  85
+          child = parent.parent().removeData("submenu").hide();
  86
+        }
  87
+      },
  88
+      
  89
+      hideDown: function() {
  90
+        var submenu = this.active.data("submenu");
  91
+        while(submenu) {
  92
+          var parent = submenu.data("menuparent");
  93
+          submenu.appendTo(parent).hide().removeData("menuparent");
  94
+          parent.parent().removeData("submenu");
  95
+          submenu = submenu.data("submenu");
  96
+        };
  97
+      }
  98
+    });
  99
+    
  100
+    var nestedmenu = $("#menu").nestedmenu({
  101
+      selected: function(event, ui) {
  102
+        $("#log").append("<div>Selected " + ui.item.text() + "</div>");
  103
+      }
  104
+    }).hide();
  105
+    
  106
+    $("button").click(function(event) {
  107
+      // TODO required to prevent the click handler below from handling this event
  108
+      event.stopPropagation();
  109
+      nestedmenu.nestedmenu("show").position({
  110
+        my: "left top",
  111
+        at: "right top",
  112
+        of: event.pageX > 0 ? event : this
  113
+      });
  114
+      $(document).one("click", function() {
  115
+        nestedmenu.nestedmenu("hide");
  116
+      })
  117
+    }).keydown(function(event) {
  118
+      var menu = nestedmenu.data("nestedmenu").active.data("menu");
  119
+      if (menu.widget().is(":hidden"))
  120
+        return;
  121
+      event.stopPropagation();
  122
+      switch (event.keyCode) {
  123
+      case $.ui.keyCode.PAGE_UP:
  124
+        menu.previousPage(event);
  125
+        break;
  126
+      case $.ui.keyCode.PAGE_DOWN:
  127
+        menu.nextPage(event);
  128
+        break;
  129
+      case $.ui.keyCode.UP:
  130
+        menu.previous(event);
  131
+        break;
  132
+      case $.ui.keyCode.LEFT:
  133
+        nestedmenu.nestedmenu("up", event);
  134
+        break;
  135
+      case $.ui.keyCode.RIGHT:
  136
+        nestedmenu.nestedmenu("down", event);
  137
+        break;
  138
+      case $.ui.keyCode.DOWN:
  139
+        menu.next(event);
  140
+        event.preventDefault();
  141
+        break;
  142
+      case $.ui.keyCode.ENTER:
  143
+      case $.ui.keyCode.TAB:
  144
+        menu.select();
  145
+        nestedmenu.nestedmenu("hide");
  146
+        event.preventDefault();
  147
+        break;
  148
+      case $.ui.keyCode.ESCAPE:
  149
+        nestedmenu.nestedmenu("hide");
  150
+        break;
  151
+      default:
  152
+        clearTimeout(menu.filterTimer);
  153
+        var prev = menu.previousFilter || "";
  154
+        var character = String.fromCharCode(event.keyCode);
  155
+        var skip = false;
  156
+        if (character == prev) {
  157
+          skip = true;
  158
+        } else {
  159
+          character = prev + character;
  160
+        }
  161
+        
  162
+        var match = menu.widget().children("li").filter(function() {
  163
+          return new RegExp("^" + character, "i").test($("a", this).text());
  164
+        });
  165
+        var match = skip && match.index(menu.active.next()) != -1 ? match.next() : match;
  166
+        if (!match.length) {
  167
+          character = String.fromCharCode(event.keyCode);
  168
+          match = menu.widget().children("li").filter(function() {
  169
+            return new RegExp("^" + character, "i").test($(this).text());
  170
+          });
  171
+        }
  172
+        if (match.length) {
  173
+          menu.activate(event, match);
  174
+          if (match.length > 1) {
  175
+            menu.previousFilter = character;
  176
+            menu.filterTimer = setTimeout(function() {
  177
+              delete menu.previousFilter;
  178
+            }, 1000);
  179
+          } else {
  180
+            delete menu.previousFilter;
  181
+          }
  182
+        } else {
  183
+          delete menu.previousFilter;
  184
+        }
  185
+      }
  186
+    });
  187
+  });
  188
+  </script>
  189
+  <style>
  190
+    body { font-size:62.5%; }
  191
+    .ui-menu { width: 200px; position: absolute; }
  192
+    .ui-menu .ui-icon { float: right; }
  193
+  </style>
  194
+</head>
  195
+<body>
  196
+  
  197
+<button>Show context menu</button>
  198
+
  199
+<ul id="menu">
  200
+  <li>
  201
+    <a href="#">Amsterdam</a>
  202
+    <ul>
  203
+      <li><a href="#">Aberdeen</a></li>
  204
+      <li><a href="#">Ada</a></li>
  205
+      <li>
  206
+        <a href="#">Adamsville</a>
  207
+        <ul>
  208
+          <li><a href="#">Anaheim</a></li>
  209
+          <li>
  210
+            <a href="#">Cologne</a>
  211
+            <ul>
  212
+              <li><a href="#">Mberdeen</a></li>
  213
+              <li><a href="#">Mda</a></li>
  214
+              <li><a href="#">Mdamsville</a></li>
  215
+              <li><a href="#">Mddyston</a></li>
  216
+              <li><a href="#">Mmesville</a></li>
  217
+            </ul>
  218
+          </li>
  219
+          <li><a href="#">Frankfurt</a></li>
  220
+        </ul>
  221
+      </li>
  222
+      <li><a href="#">Addyston</a></li>
  223
+      <li><a href="#">Amesville</a></li>
  224
+    </ul>
  225
+  </li>
  226
+  <li><a href="#">Anaheim</a></li>
  227
+  <li><a href="#">Cologne</a></li>
  228
+  <li><a href="#">Frankfurt</a></li>
  229
+  <li>
  230
+    <a href="#">Magdeburg</a>
  231
+    <ul>
  232
+      <li><a href="#">Mberdeen</a></li>
  233
+      <li><a href="#">Mda</a></li>
  234
+      <li><a href="#">Mdamsville</a></li>
  235
+      <li><a href="#">Mddyston</a></li>
  236
+      <li><a href="#">Mmesville</a></li>
  237
+    </ul>
  238
+  </li>
  239
+  <li><a href="#">Munich</a></li>
  240
+  <li><a href="#">Utrecht</a></li>
  241
+  <li><a href="#">Zurich</a></li>
  242
+</ul>
  243
+
  244
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  245
+  Log:
  246
+  <div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
  247
+</div>
  248
+
  249
+</body>
  250
+</html>

0 notes on commit d4ad2cb

Please log in to comment.
Blog | Support | Training | Contact | API | Status | Twitter | Help | Security
© 2010 GitHub Inc. All rights reserved. | Terms of Service | Privacy Policy
Powered by the Dedicated Servers and
Cloud Computing of Rackspace Hosting®
Dedicated Server