Skip to content

Commit 23340f1

Browse files
kborcherskborchers
committed
Menu: Added Home moves to first item and End moves to last item in currently active menu or submenu. Also fixed PageUp and PageDown so that they don't wrap back around to other end of menu. Also fixed scrolling to use activeMenu rather than element to all. Also added unit tests for keyboard nav
1 parent 51ee3be commit 23340f1

File tree

3 files changed

+504
-21
lines changed

3 files changed

+504
-21
lines changed

‎tests/unit/menu/menu.html

Lines changed: 157 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
$("#log").data("lastItem",item);
3232
$('li:eq(' + item + ') a',menu).trigger("click");
3333
}
34-
34+
3535

3636
</script>
3737
<script type="text/javascript" src="menu_core.js"></script>
@@ -41,10 +41,12 @@
4141
<script type="text/javascript" src="menu_options.js"></script>
4242

4343
<script type="text/javascript" src="../swarminject.js"></script>
44-
44+
4545
<style>
4646
#qunit-fixture { font-size: 10pt; font-family: 'trebuchet ms', verdana, arial; }
4747
#list, #list1 *, #navigation, #navigation * { margin: 0; padding: 0; font-size: 12px; }
48+
#menu3 { height: 250px; overflow: auto; }
49+
#menu4, #menu4 ul { height: 250px; overflow: auto; }
4850
</style>
4951
</head>
5052
<body>
@@ -66,6 +68,159 @@ <h2 id="qunit-userAgent"></h2>
6668
<li class="foo"><a class="foo" href="#">Addyston</a></li>
6769
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
6870
</ul>
71+
72+
<ul id="menu2">
73+
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
74+
<li class="foo"><a class="foo" href="#">Ada</a></li>
75+
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
76+
<li class="foo"><a class="foo" href="#">Addyston</a></li>
77+
<li>
78+
<a href="#">Delphi</a>
79+
<ul>
80+
<li class="foo"><a class="foo" href="#">Ada</a></li>
81+
<li class="foo"><a class="foo" href="#">Saarland</a></li>
82+
<li class="foo"><a class="foo" href="#">Salzburg</a></li>
83+
</ul>
84+
</li>
85+
<li class="foo"><a class="foo" href="#">Saarland</a></li>
86+
<li>
87+
<a href="#">Salzburg</a>
88+
<ul>
89+
<li>
90+
<a href="#">Delphi</a>
91+
<ul>
92+
<li class="foo"><a class="foo" href="#">Ada</a></li>
93+
<li class="foo"><a class="foo" href="#">Saarland</a></li>
94+
<li class="foo"><a class="foo" href="#">Salzburg</a></li>
95+
</ul>
96+
</li>
97+
<li>
98+
<a href="#">Delphi</a>
99+
<ul>
100+
<li class="foo"><a class="foo" href="#">Ada</a></li>
101+
<li class="foo"><a class="foo" href="#">Saarland</a></li>
102+
<li class="foo"><a class="foo" href="#">Salzburg</a></li>
103+
</ul>
104+
</li>
105+
<li class="foo"><a class="foo" href="#">Perch</a></li>
106+
</ul>
107+
</li>
108+
</ul>
109+
110+
<ul class="foo" id="menu3">
111+
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
112+
<li class="foo"><a class="foo" href="#">Ada</a></li>
113+
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
114+
<li class="foo"><a class="foo" href="#">Addyston</a></li>
115+
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
116+
<li class="foo"><a class="foo" href="#">Adena</a></li>
117+
<li class="foo"><a class="foo" href="#">Adrian</a></li>
118+
<li class="foo"><a class="foo" href="#">Akron</a></li>
119+
<li class="foo"><a class="foo" href="#">Albany</a></li>
120+
<li class="foo"><a class="foo" href="#">Alexandria</a></li>
121+
<li class="foo"><a class="foo" href="#">Alger</a></li>
122+
<li class="foo"><a class="foo" href="#">Alledonia</a></li>
123+
<li class="foo"><a class="foo" href="#">Alliance</a></li>
124+
<li class="foo"><a class="foo" href="#">Alpha</a></li>
125+
<li class="foo"><a class="foo" href="#">Alvada</a></li>
126+
<li class="foo"><a class="foo" href="#">Alvordton</a></li>
127+
<li class="foo"><a class="foo" href="#">Amanda</a></li>
128+
<li class="foo"><a class="foo" href="#">Amelia</a></li>
129+
<li class="foo"><a class="foo" href="#">Amesville</a></li>
130+
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
131+
<li class="foo"><a class="foo" href="#">Ada</a></li>
132+
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
133+
<li class="foo"><a class="foo" href="#">Addyston</a></li>
134+
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
135+
<li class="foo"><a class="foo" href="#">Adena</a></li>
136+
<li class="foo"><a class="foo" href="#">Adrian</a></li>
137+
<li class="foo"><a class="foo" href="#">Akron</a></li>
138+
<li class="foo"><a class="foo" href="#">Albany</a></li>
139+
<li class="foo"><a class="foo" href="#">Alexandria</a></li>
140+
<li class="foo"><a class="foo" href="#">Alger</a></li>
141+
<li class="foo"><a class="foo" href="#">Alledonia</a></li>
142+
<li class="foo"><a class="foo" href="#">Alliance</a></li>
143+
<li class="foo"><a class="foo" href="#">Alpha</a></li>
144+
<li class="foo"><a class="foo" href="#">Alvada</a></li>
145+
<li class="foo"><a class="foo" href="#">Alvordton</a></li>
146+
<li class="foo"><a class="foo" href="#">Amanda</a></li>
147+
<li class="foo"><a class="foo" href="#">Amelia</a></li>
148+
<li class="foo"><a class="foo" href="#">Amesville</a></li>
149+
</ul>
150+
151+
<ul class="foo" id="menu4">
152+
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
153+
<li class="foo">
154+
<a class="foo" href="#">Ada</a>
155+
<ul class="foo">
156+
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
157+
<li class="foo"><a class="foo" href="#">Ada</a></li>
158+
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
159+
<li class="foo"><a class="foo" href="#">Addyston</a></li>
160+
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
161+
<li class="foo"><a class="foo" href="#">Adena</a></li>
162+
<li class="foo"><a class="foo" href="#">Adrian</a></li>
163+
<li class="foo"><a class="foo" href="#">Akron</a></li>
164+
<li class="foo"><a class="foo" href="#">Albany</a></li>
165+
<li class="foo"><a class="foo" href="#">Alexandria</a></li>
166+
<li class="foo"><a class="foo" href="#">Alger</a></li>
167+
<li class="foo"><a class="foo" href="#">Alledonia</a></li>
168+
<li class="foo"><a class="foo" href="#">Alliance</a></li>
169+
<li class="foo"><a class="foo" href="#">Alpha</a></li>
170+
<li class="foo"><a class="foo" href="#">Alvada</a></li>
171+
<li class="foo"><a class="foo" href="#">Alvordton</a></li>
172+
<li class="foo"><a class="foo" href="#">Amanda</a></li>
173+
<li class="foo"><a class="foo" href="#">Amelia</a></li>
174+
<li class="foo"><a class="foo" href="#">Amesville</a></li>
175+
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
176+
<li class="foo"><a class="foo" href="#">Ada</a></li>
177+
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
178+
<li class="foo"><a class="foo" href="#">Addyston</a></li>
179+
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
180+
<li class="foo"><a class="foo" href="#">Adena</a></li>
181+
<li class="foo"><a class="foo" href="#">Adrian</a></li>
182+
<li class="foo"><a class="foo" href="#">Akron</a></li>
183+
<li class="foo"><a class="foo" href="#">Albany</a></li>
184+
</ul>
185+
</li>
186+
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
187+
<li class="foo"><a class="foo" href="#">Addyston</a></li>
188+
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
189+
<li class="foo"><a class="foo" href="#">Adena</a></li>
190+
<li class="foo"><a class="foo" href="#">Adrian</a></li>
191+
<li class="foo"><a class="foo" href="#">Akron</a></li>
192+
<li class="foo"><a class="foo" href="#">Albany</a></li>
193+
<li class="foo"><a class="foo" href="#">Alexandria</a></li>
194+
<li class="foo"><a class="foo" href="#">Alger</a></li>
195+
<li class="foo"><a class="foo" href="#">Alledonia</a></li>
196+
<li class="foo"><a class="foo" href="#">Alliance</a></li>
197+
<li class="foo"><a class="foo" href="#">Alpha</a></li>
198+
<li class="foo"><a class="foo" href="#">Alvada</a></li>
199+
<li class="foo"><a class="foo" href="#">Alvordton</a></li>
200+
<li class="foo"><a class="foo" href="#">Amanda</a></li>
201+
<li class="foo"><a class="foo" href="#">Amelia</a></li>
202+
<li class="foo"><a class="foo" href="#">Amesville</a></li>
203+
<li class="foo"><a class="foo" href="#">Aberdeen</a></li>
204+
<li class="foo"><a class="foo" href="#">Ada</a></li>
205+
<li class="foo"><a class="foo" href="#">Adamsville</a></li>
206+
<li class="foo"><a class="foo" href="#">Addyston</a></li>
207+
<li class="foo"><a class="foo" href="#">Adelphi</a></li>
208+
<li class="foo"><a class="foo" href="#">Adena</a></li>
209+
<li class="foo"><a class="foo" href="#">Adrian</a></li>
210+
<li class="foo"><a class="foo" href="#">Akron</a></li>
211+
<li class="foo"><a class="foo" href="#">Albany</a></li>
212+
<li class="foo"><a class="foo" href="#">Alexandria</a></li>
213+
<li class="foo"><a class="foo" href="#">Alger</a></li>
214+
<li class="foo"><a class="foo" href="#">Alledonia</a></li>
215+
<li class="foo"><a class="foo" href="#">Alliance</a></li>
216+
<li class="foo"><a class="foo" href="#">Alpha</a></li>
217+
<li class="foo"><a class="foo" href="#">Alvada</a></li>
218+
<li class="foo"><a class="foo" href="#">Alvordton</a></li>
219+
<li class="foo"><a class="foo" href="#">Amanda</a></li>
220+
<li class="foo"><a class="foo" href="#">Amelia</a></li>
221+
<li class="foo"><a class="foo" href="#">Amesville</a></li>
222+
</ul>
223+
69224
<div id="log"></div>
70225

71226
</div>

0 commit comments

Comments
 (0)