Zarys teoretyczny

Problem możnaby rozwiązać za pomocą samego JavaScriptu i odpowiednich właściwości obiektu event. Idąc jednak z duchem czasu, postaram się wyjaśnić poruszany temat, używając także frameworku jQuery.
W bibliotece tej znajdziemy trzy podstawowe typy zdarzeń, dzięki którym można obsługiwać wciśnięcia przycisków na klawiaturze:

• keydown wywoływane w momencie wciśnięcia klawisza,
• keypress wywoływane w momencie wpisania znaku z klawiatury w dany element strony,
• keyup wywoływane w momencie zwolnienia przycisku.

Są to oczywiście ogólnie przyjęte definicje, gdyż implementacja tych zdarzeń może się w pewnym stopniu różnić w różnego typu silnikach przeglądarek.

Dla naszych potrzeb będziemy używać keypress. Obsługuje ono jednak tylko klawisze alfanumeryczne, co za tym idzie – jeżeli ktoś chciałby używać przycisków takich jak [Ctrl] czy [Shift], musiałby skorzystać z keydown.
Wszystkie trzy zdarzenia mają zbliżoną konstrukcję, którą pokazujemy poniżej.

$(obiekt).zdarzenie(function(parametr) {
 if ( parametr.which == KOD_ASCII 
 || parametr.keyCode == KOD_ASCII) {
 alert(ZNAK);
 }
 });

Właściwość which jest dostępna i w keydown, i w keypress. Za to keyCode tylko w tym pierwszym. Należy także pamiętać, że keyCode w przypadku znaków alfabetycznych zwraca kod ASCII wielkich liter (od 65 do 90). W przypadku keypress są to odpowedniki małych liter.

 

$(document).keypress(function(e) {
 if ( e.which == 100 ) {
 alert(‘d’);
 }
 });

 $(document).keydown(function(e) {
 if ( e.keyCode == 68 ) {
 alert(‘D’);
 }
 });

Agregator treści RSS z nawigacją klawiszową

Aby wytłumaczyć działanie powyższych zdarzeń, zbudujmy prosty agregator skróconych treści RSS ostatnich 9 publikacji blogów na Webhostingu. Pominę oczywiście kwestię samego kodu PHP odpowiedzialnego za syndykowanie treści, gdyż ogranicza się ona praktycznie do odpowiedniego załadowania XML, posługując się klasą DOMDocument. Nie to jest jednak przedmiotem tej porady.

Rysunek 1: przykładowy szablon.

Na początku należy pobrać bibliotekę jQuery, a także utworzyć odpowiednią strukturę xHTML naszego przykładu. Niech to będzie dwukolumnowa strona z nawigacją rozmieszczoną po lewej stronie i treścią po prawej.

 

<div id="container">
 <div id="navigation">
 <ul>
 <li id="nav_id_0" class="selected_tab"><a href="javascript:changeTab('menu', 0);">Nagłówek pierwszy</a></li>            <li id="nav_id_1"><a href="javascript:changeTab('menu', 1);">Nagłówek drugi</a></li>    
 </ul>    
 </div>
 <div class="tabs" id="tab_id_0">
 <h2>Nagłówek pierwszy</h2>
 <p>Treść pierwsza</p>
 </div>
 <div class="tabs_invisible" id="tab_id_1">
 <h2>Nagłówek drugi</h2>
 <p>Treść druga</p>
 </div>
</div>

Nadrzędny tag pozwoli na wyśrodkowanie całej strony. Pierwszy potomek o identyfikatorze navigation jest wspominanym już menu.

Wewnątrz jego listy możemy zauważyć kolejne identyfikatory które będą służyć do określenia aktywnego elementu poprzez nadanie mu klasy selected_tab oraz odnośniki w postaci JavaScriptowej funkcji określające typ akcji oraz identyfikator pozycji w menu. Dzięki temu będziemy mogli obsługiwać skrypt nie tylko z poziomu klawiatury, ale także klasycznie.