|
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> |
0 commit comments