Menu rozwijane z dostępnymi klawiszami sieci Web?

Question

Czy istnieje sposób na zbudowanie rozwijanych menu dostępnych za pomocą klawiatury na stronach internetowych? Nasza obecna aplikacja internetowa ma standardowe menu najeżdżania, ale to naprawdę spowalnia naszych urzędników wprowadzania danych (którzy są przyzwyczajeni do aplikacji komputerowych, gdzie dostępne jest menu z klawiaturą i nie trzeba używać myszy).

Ustaliliśmy, jak wyświetlić menu za pomocą skrótu klawiaturowego, ale nie wiem, jak wybrać jeden z wpisów (np. Za pomocą pierwszej litery pozycji menu, jak w większości aplikacji komputerowych).

Edit - link do strony, która to robi, lub innego rodzaju przykład, byłoby bardzo pomocne

Answer 1

Można użyć accesskey atrybut dla tagu kotwicy:

<a href="something.html" accesskey="s">[S]omething</a> 

ale skrótu klawiaturowego użyć różni się we wszystkich przeglądarkach:

• IE: Alt + accesskey, Enter
• FireFox: Alt + Shift + acce sskey
• Opera: Shift + Esc + accesskey
• Chrome: Alt + accesskey

Answer 2

krótka odpowiedź jest twierdząca - JavaScript i jQuery zdarzenia opalane na podstawie danego naciśnięciem klawisza prawdopodobnie działa najlepiej.

Answer 3

Musisz wysłuchać naciśnięć klawiszy, gdy menu jest otwarte, a twój kod przesunie wybraną pozycję.

8 = backspace, 13 = return, 27 = esc, 40 = down, 38 = up itd. Są to tylko wartości ASCII dla naciśnięć klawiszy.

Answer 4

Najprostszym sposobem byłoby dodanie accesskeys do linków menu. Jest to funkcja zaprojektowana specjalnie do tej funkcji.

Answer 5

Najważniejsze wydarzenia:
http://api.jquery.com/keypress/
http://api.jquery.com/keydown/
http://api.jquery.com/keyup/

CSS Menu, zakładka dostępna:
http://carroll.org.uk/sandbox/suckerfish/bones2.html

Te ostatnie prace przy użyciu: skupić się pseudo-element. Napotkałem pewne zastrzeżenia za pomocą metody opisanej w artykule, ale działa.

Pierwszy (zestaw) nie wymaga objaśnień.

Answer 6

Wypróbuj ten skrypt menu, który zbudowałem dla naszego portalu stanowego w Minnesocie. Jest dostępny z klawiatury (klawisz tabulatora, aby poruszać się po wszystkich poziomach), pokazuje ścieżkę, przez którą przechodzisz, i obsługuje maksymalnie pięć poziomów (w tym najwyższy poziom).

Top Menu: keyboard-accessible jquery menu.

Obecnie ogranicza się tylko do górnej, poziomej nawigacji stylów, ale przyszłe wersje sprawią, że będzie ona rozszerzalna do menu zorientowanego pionowo lub poziomo.

Posiada również ograniczoną obsługę dotykową (trochę problemów z iPhonem/iPadem), ale pracuję nad tym, aby uzyskać szerszą obsługę.