1 |
<!doctype html> |
2 |
<html> |
3 |
<head> |
4 |
<meta charset="utf-8"> |
5 |
<title>Menu Visual Test: Default</title> |
6 |
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> |
7 |
<script src="../../../jquery-1.9.1.js"></script> |
8 |
<script src="../../../ui/jquery.ui.core.js"></script> |
9 |
<script src="../../../ui/jquery.ui.widget.js"></script> |
10 |
<script src="../../../ui/jquery.ui.position.js"></script> |
11 |
<script src="../../../ui/jquery.ui.menu.js"></script> |
12 |
<script> |
13 |
$(function() { |
14 |
function logger( event, ui ) { |
15 |
$( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" ); |
16 |
} |
17 |
|
18 |
$( "#menu1, #menu2, #menu3, .menu4, #menu7" ).menu({ |
19 |
select: logger |
20 |
}); |
21 |
|
22 |
$( "#menu5" ).menu({ |
23 |
menus: "div", |
24 |
select: logger |
25 |
}); |
26 |
|
27 |
$( "#menu6" ).menu({ |
28 |
menus: ".menuElement", |
29 |
select: logger, |
30 |
icon: "ui-icon-carat-1-s" |
31 |
}); |
32 |
}); |
33 |
</script> |
34 |
<style> |
35 |
body { font-size:62.5%; } |
36 |
.ui-menu { width: 200px; margin-bottom: 2em; } |
37 |
.menu4 { height: 200px; overflow-y: auto; overflow-x: hidden; } |
38 |
.address-item { border-bottom: 1px solid #999; } |
39 |
.address-header { display: block; margin-bottom: .2em; font-weight: bold; } |
40 |
.address-content { display: block; margin-bottom: .2em; padding-left: 10px; } |
41 |
</style> |
42 |
</head> |
43 |
<body> |
44 |
|
45 |
<h2>Default inline menu</h2> |
46 |
<ul id="menu1"> |
47 |
<li><a href="#">Aberdeen</a></li> |
48 |
<li><a href="#">Ada</a></li> |
49 |
<li><a href="#">Adamsville</a></li> |
50 |
<li><a href="#">Addyston</a></li> |
51 |
<li><a href="#">Delphi</a></li> |
52 |
<li><a href="#">Saarland</a></li> |
53 |
<li><a href="#">Salzburg</a></li> |
54 |
</ul> |
55 |
|
56 |
<h2>Inline with disabled items and submenus</h2> |
57 |
<ul id="menu2"> |
58 |
<li class="ui-state-disabled"><a href="#">Aberdeen</a></li> |
59 |
<li><a href="#">Ada</a></li> |
60 |
<li><a href="#">Adamsville</a></li> |
61 |
<li><a href="#">Addyston</a></li> |
62 |
<li> |
63 |
<a href="#">Delphi</a> |
64 |
<ul> |
65 |
<li class="ui-state-disabled"><a href="#">Ada</a></li> |
66 |
<li><a href="#">Saarland</a></li> |
67 |
<li><a href="#">Salzburg</a></li> |
68 |
</ul> |
69 |
</li> |
70 |
<li><a href="#">Saarland</a></li> |
71 |
<li> |
72 |
<a href="#">Salzburg</a> |
73 |
<ul> |
74 |
<li> |
75 |
<a href="#">Delphi</a> |
76 |
<ul> |
77 |
<li><a href="#">Ada</a></li> |
78 |
<li><a href="#">Saarland</a></li> |
79 |
<li><a href="#">Salzburg</a></li> |
80 |
</ul> |
81 |
</li> |
82 |
<li> |
83 |
<a href="#">Delphi</a> |
84 |
<ul> |
85 |
<li><a href="#">Ada</a></li> |
86 |
<li><a href="#">Saarland</a></li> |
87 |
<li><a href="#">Salzburg</a></li> |
88 |
</ul> |
89 |
</li> |
90 |
<li><a href="#">Perch</a></li> |
91 |
</ul> |
92 |
</li> |
93 |
<li class="ui-state-disabled"><a href="#">Amesville</a></li> |
94 |
</ul> |
95 |
|
96 |
<h2>Menu with icons</h2> |
97 |
<ul id="menu3"> |
98 |
<li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li> |
99 |
<li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li> |
100 |
<li><a href="#">Adamsville</a></li> |
101 |
<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li> |
102 |
<li class="ui-state-disabled"> |
103 |
<a href="#">Delphi</a> |
104 |
<ul> |
105 |
<li><a href="#">Ada</a></li> |
106 |
<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li> |
107 |
<li><a href="#">Salzburg</a></li> |
108 |
</ul> |
109 |
</li> |
110 |
<li><a href="#">Saarland</a></li> |
111 |
<li> |
112 |
<a href="#"><span class="ui-icon ui-icon-print"></span>Salzburg</a> |
113 |
<ul> |
114 |
<li> |
115 |
<a href="#"><span class="ui-icon ui-icon-wrench"></span>Delphi</a> |
116 |
<ul> |
117 |
<li><a href="#">Ada</a></li> |
118 |
<li><a href="#">Saarland</a></li> |
119 |
<li><a href="#">Salzburg</a></li> |
120 |
</ul> |
121 |
</li> |
122 |
<li> |
123 |
<a href="#">Delphi</a> |
124 |
<ul> |
125 |
<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Ada</a></li> |
126 |
<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li> |
127 |
<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Salzburg</a></li> |
128 |
</ul> |
129 |
</li> |
130 |
<li><a href="#">Perch</a></li> |
131 |
</ul> |
132 |
</li> |
133 |
</ul> |
134 |
|
135 |
<h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2> |
136 |
<ul class="menu4"> |
137 |
<li><a href="#">Aberdeen</a></li> |
138 |
<li><a href="#">Ada</a></li> |
139 |
<li><a href="#">Adamsville</a></li> |
140 |
<li><a href="#">Addyston</a></li> |
141 |
<li><a href="#">Adelphi</a></li> |
142 |
<li><a href="#">Adena</a></li> |
143 |
<li><a href="#">Adrian</a></li> |
144 |
<li><a href="#">Akron</a></li> |
145 |
<li><a href="#">Albany</a></li> |
146 |
<li><a href="#">Alexandria</a></li> |
147 |
<li><a href="#">Alger</a></li> |
148 |
<li><a href="#">Alledonia</a></li> |
149 |
<li><a href="#">Alliance</a></li> |
150 |
<li><a href="#">Alpha</a></li> |
151 |
<li><a href="#">Alvada</a></li> |
152 |
<li><a href="#">Alvordton</a></li> |
153 |
<li><a href="#">Amanda</a></li> |
154 |
<li><a href="#">Amelia</a></li> |
155 |
<li><a href="#">Amesville</a></li> |
156 |
<li><a href="#">Aberdeen</a></li> |
157 |
<li><a href="#">Ada</a></li> |
158 |
<li><a href="#">Adamsville</a></li> |
159 |
<li><a href="#">Addyston</a></li> |
160 |
<li><a href="#">Adelphi</a></li> |
161 |
<li><a href="#">Adena</a></li> |
162 |
<li><a href="#">Adrian</a></li> |
163 |
<li><a href="#">Akron</a></li> |
164 |
<li><a href="#">Albany</a></li> |
165 |
<li><a href="#">Alexandria</a></li> |
166 |
<li><a href="#">Alger</a></li> |
167 |
<li><a href="#">Alledonia</a></li> |
168 |
<li><a href="#">Alliance</a></li> |
169 |
<li><a href="#">Alpha</a></li> |
170 |
<li><a href="#">Alvada</a></li> |
171 |
<li><a href="#">Alvordton</a></li> |
172 |
<li><a href="#">Amanda</a></li> |
173 |
<li><a href="#">Amelia</a></li> |
174 |
<li><a href="#">Amesville</a></li> |
175 |
</ul> |
176 |
|
177 |
<h2>Menu with custom markup</h2> |
178 |
<div id="menu5"> |
179 |
<blockquote><a href="#">Aberdeen</a></blockquote> |
180 |
<blockquote><a href="#">Ada</a></blockquote> |
181 |
<blockquote class="ui-state-disabled"><a href="#">Adamsville</a></blockquote> |
182 |
<blockquote><a href="#">Addyston</a></blockquote> |
183 |
<blockquote> |
184 |
<a href="#">Delphi</a> |
185 |
<div> |
186 |
<blockquote><a href="#">Ada</a></blockquote> |
187 |
<blockquote><a href="#">Saarland</a></blockquote> |
188 |
<blockquote><a href="#">Salzburg</a></blockquote> |
189 |
</div> |
190 |
</blockquote> |
191 |
<blockquote><a href="#">Saarland</a></blockquote> |
192 |
<blockquote> |
193 |
<a href="#">Salzburg</a> |
194 |
<div> |
195 |
<blockquote> |
196 |
<a href="#">Delphi</a> |
197 |
<div> |
198 |
<blockquote><a href="#">Ada</a></blockquote> |
199 |
<blockquote><a href="#">Saarland</a></blockquote> |
200 |
<blockquote><a href="#">Salzburg</a></blockquote> |
201 |
</div> |
202 |
</blockquote> |
203 |
<blockquote> |
204 |
<a href="#">Delphi</a> |
205 |
<div> |
206 |
<blockquote><a href="#">Ada</a></blockquote> |
207 |
<blockquote><a href="#">Saarland</a></blockquote> |
208 |
<blockquote><a href="#">Salzburg</a></blockquote> |
209 |
</div> |
210 |
</blockquote> |
211 |
<blockquote><a href="#">Perch</a></blockquote> |
212 |
</div> |
213 |
</blockquote> |
214 |
</div> |
215 |
|
216 |
<h2>Menu with custom markup, multi-line items and a custom submenu icon</h2> |
217 |
<div class="menuElement" id="menu6"> |
218 |
<div class="address-item"> |
219 |
<a href="#"> |
220 |
<span class="address-header">John Doe</span> |
221 |
<span class="address-content">78 West Main St Apt 3A</span> |
222 |
<span class="address-content">Bloomsburg, PA 12345</span> |
223 |
</a> |
224 |
</div> |
225 |
<div class="address-item"> |
226 |
<a href="#"> |
227 |
<span class="address-header">Jane Doe</span> |
228 |
<span class="address-content">78 West Main St Apt 3A</span> |
229 |
<span class="address-content">Bloomsburg, PA 12345</span> |
230 |
</a> |
231 |
</div> |
232 |
<div class="address-item ui-state-disabled"> |
233 |
<a href="#"> |
234 |
<span class="address-header">James Doe</span> |
235 |
<span class="address-content">78 West Main St Apt 3A</span> |
236 |
<span class="address-content">Bloomsburg, PA 12345</span> |
237 |
</a> |
238 |
</div> |
239 |
<div class="address-item"> |
240 |
<a href="#"> |
241 |
<span class="address-header">Jenny Doe</span> |
242 |
<span class="address-content">78 West Main St Apt 3A</span> |
243 |
<span class="address-content">Bloomsburg, PA 12345</span> |
244 |
</a> |
245 |
</div> |
246 |
<div class="address-item"> |
247 |
<a href="#"> |
248 |
<span class="address-header">John Doe</span> |
249 |
<span class="address-content">78 West Main St Apt 3A</span> |
250 |
<span class="address-content">Bloomsburg, PA 12345</span> |
251 |
</a> |
252 |
<div class="menuElement"> |
253 |
<div><a href="#">Ada</a></div> |
254 |
<div><a href="#">Saarland</a></div> |
255 |
<div><a href="#">Salzburg</a></div> |
256 |
</div> |
257 |
</div> |
258 |
</div> |
259 |
|
260 |
<h2>Inline with dividers and elements without anchors</h2> |
261 |
<ul id="menu7"> |
262 |
<li><strong>Group 1</strong></li> |
263 |
<li><a href="#">Aberdeen</a></li> |
264 |
<li><a href="#">Ada</a></li> |
265 |
<li><a href="#">Adamsville</a></li> |
266 |
<li><a href="#">Addyston</a></li> |
267 |
<li></li> |
268 |
<li><strong>Group 2</strong></li> |
269 |
<li> |
270 |
<a href="#">Delphi</a> |
271 |
<ul> |
272 |
<li><a href="#">Ada</a></li> |
273 |
<li><a href="#">Saarland</a></li> |
274 |
<li><a href="#">Salzburg</a></li> |
275 |
</ul> |
276 |
</li> |
277 |
<li><a href="#">Saarland</a></li> |
278 |
<li>---</li> |
279 |
<li><strong>Group 3</strong></li> |
280 |
<li> |
281 |
<a href="#">Salzburg</a> |
282 |
<ul> |
283 |
<li> |
284 |
<a href="#">Delphi</a> |
285 |
<ul> |
286 |
<li><a href="#">Ada</a></li> |
287 |
<li> - </li> |
288 |
<li><a href="#">Saarland</a></li> |
289 |
<li>—</li> |
290 |
<li><a href="#">Salzburg</a></li> |
291 |
<li>–</li> |
292 |
</ul> |
293 |
</li> |
294 |
<li> |
295 |
<a href="#">Delphi</a> |
296 |
<ul> |
297 |
<li><a href="#">Ada</a></li> |
298 |
<li><a href="#">Saarland</a></li> |
299 |
<li><a href="#">Salzburg</a></li> |
300 |
</ul> |
301 |
</li> |
302 |
<li><a href="#">Perch</a></li> |
303 |
</ul> |
304 |
</li> |
305 |
<li><a href="#">Amesville</a></li> |
306 |
</ul> |
307 |
|
308 |
<div style="position: absolute; top: 1em; right: 1em;"> |
309 |
Log: |
310 |
<div id="log" style="height: 400px; width: 300px; overflow: auto; border: 1px solid #000;"></div> |
311 |
</div> |
312 |
|
313 |
</body> |
314 |
</html> |