Cum se creează o navigație cu tastatură folosind jQuery

Cheia succesului unui site este ușurința cu care utilizatorul găsește ceea ce caută. Astfel, merită să cheltuiți mult timp și efort pentru a crea atât sisteme de navigație utile, cât și atractive. În ultimul timp, am început să experimentez noi modalități de a naviga pe un site web. În acest tutorial vă vom arăta cum să lăsați utilizatorul să utilizeze tastatura lor pentru a ajunge în jurul site-ului.

Pasul 1

Primul lucru pe care trebuie să-l facem este să creăm pagina noastră de testare. În acest caz, mă voi referi la ea ca la demo.html și va conține următoarele:

O legătură către cadrul jQuery.
O legătură către scenariul la care vom lucra mai târziu. Să spunem asta keypress_nav.js
Un link la un fișier CSS numit style.css (vom lucra și la aceasta mai târziu).
Un antet div care va conține navigația noastră, printre altele. Și
Cinci elemente unice div care vor servi ca pagini pentru site-ul nostru.

Deci, iată ce arată demo.html la acest moment:

   KeyPress Navigation Demo         
  Bine ati venit!
 Unele texte
 
  Despre mine
 Unele texte
 
  Nu aveți spam
 Unele texte
 
  Premii, atât de multe ... 
 Unele texte
 
  Site-uri cool
 Unele texte

Pasul 2

Acum, când avem DIV-urile noastre, putem continua și crea navigarea pentru pagină. După cum probabil ați ghicit, vom folosi o listă neordonată

recipient

   KeyPress Navigation Demo         Acasă (a)
 Despre (e)
 Contact (d)
 Premii (f)
 Linkuri (g)
 
 
  Bine ati venit!
 Unele texte
 
  Despre mine
 Unele texte
 
  Nu aveți spam
 Unele texte
 
  Premii, atât de multe ... 
 Unele texte
 
  Site-uri cool
 Unele texte

Notă: Litera (cheia) din interiorul parantezei este cheia pe care o vom folosi ulterior ca navigare pentru pagina noastră.

Pasul 3

Structura paginii noastre de test este acum completă, dar nu are un efect vizual. Deci, sa adaugam cateva CSS si jazz-ul. Un lucru de retinut inainte de a incepe stilul este ca pagina noastra trebuie sa arate bine chiar daca JavaScript este oprit. Scripturile, în opinia mea, ar trebui să fie întotdeauna folosite ca un bonus pentru acei utilizatori care au activat JavaScript, dar nu ar trebui să îi înstrăineze pe cei care nu au. Suntem designeri web / dezvoltatori la urma urmei, și ne pasă de utilitate, bine?

Puteți vedea aspectul pe care mergem în captura de ecran de mai sus. Este simplu și utilizează câteva culori frumoase și îndrăznețe pentru a evidenția diferitele secțiuni. Deci, aici este CSS-ul nostru:

corp marja: 0; umplutura: 0; font-family: "Lucida Grande", "Lucida Sans", sans-serif; font-size: 100%; fundal: # 333;  /* Antet ---------------------------------------------- ---- * / #header lățime: 460px; marja: 0 auto; font-size: .75em; font-family: "Helvetica Neue", Helvetica, sans-serif;  #header ul style-style: none; marja: 0; umplutura: 0;  #header ul li float: stânga; text-aliniere: stânga;  #header ul li a afișare: bloc; culoare: # ffff66; text-decoration: nici unul; text-transform: majuscule; margin-dreapta: 20px;  #header ul li a: mutați text-decoration: underline; culoare: # ffcc66;  / * Containere ---------------------------------------------- ---- * / .container width: 400px; înălțime: 300px; margine: 30 pixeli automat; padding: 10px 20px; frontieră: 10px solid #fff; culoare: #fff; font-size: .75em; linia-înălțime: 2em;  .container h2 padding: 5px 10px; lățime: 200px;  #home background: # 15add1;  #home h2 background: # 007aa5;  #about background: # fdc700;  #about h2 background: # bd9200;  #contact background: # f80083;  #contact h2 background: # af005e;  #awards background: # f18300;  # awards h2 fundal: # bb5f00;  #links background: # 98c313;  #links h2 background: # 6f9a00;  / * Reguli de auto-compensare ------------------------------------------- ------- * / ul # navigare: după content: "."; afișare: bloc; vizibilitate: ascuns; clar: ambele; înălțime: 0;  * html ul # navigație height: 1px;  ul # navigare min-height: 1px;

Notă: Am adăugat niște reguli de auto-compensare la navigație pentru a rezolva lipsa înălțimii datorită elementelor plutitoare interioare. Cu alte cuvinte, regulile de marjă din cel mai mare container superior vor avea acum efectul corespunzător asupra navigației

Pasul 5

În acest moment în tutorial ar trebui să aveți o pagină care arată în felul următor:

Este o pagină funcțională și funcționează corect fără a fi nevoie ca JavaScript să fie activat. Cu toate acestea, așa cum am spus mai înainte, să oferim un mic bonus utilizatorilor care au activat JavaScript în browserele lor. Vom face acest lucru în două etape. În primul rând, vom crea două funcții care vor ascunde și afișa corespunzător paginile. Și secondy, vom adăuga niște coduri pentru a determina tastele apăsate de utilizator. Să creați acum un fișier numit keypress_nav.js și să lucrăm la funcțiile noastre.

Pasul 6

Vom avea nevoie de două funcții pentru ca scenariul nostru să funcționeze așa cum se dorește. Una dintre funcții va fi apelată atunci când utilizatorul apasă una dintre tastele noastre de navigare predefinite (literele din paranteze din pasul 2) și va ascunde toate celelalte containere care afișează numai codul DIV asociat acestei taste. Aceasta este ceea ce arată prima noastră funcție:

funcția showViaKeypress (element_id) $ ("container") css ("display", "none"); $ (Element_id) .slideDown ( "lent");

Acum, cea de-a doua funcție va lua o serie de linkuri și le va atribui funcțiilor țintă pentru clicuri. Cu alte cuvinte, funcția va primi legăturile noastre de navigare, va prelua atributul "href" și va afișa DIV-ul corespunzător dând clic pe el. Deci, iată ce arată a doua funcție:

funcția showViaLink (array) array.each (funcția (i) $ (this) .click (funcția () var target = $ (this) .attr ("href" ("afișare", "none"); $ (target) .slideDown ("slow");););

Pasul 7

Acum, când avem funcțiile noastre codificate, trebuie să le numim în mod adecvat când pagina se încarcă. Primul lucru pe care trebuie să-l facem este să ascundem toate elementele care au clasă recipient cu excepția DIV care are ID-ul Acasă. Apoi trebuie să sunăm showViaLink () funcția cu legăturile din interiorul navigației noastre

showViaPress ()

intrerupator

Comutatorul va avea 5 cazuri (unul pentru fiecare legătură), iar numărul său corespunde numărului ASCII pentru apăsarea tastei. De exemplu, dacă "A" tasta este apăsată, comutatorul va folosi cazul 97. Deci, iată cum arată codul:

$ (document) .ready (funcția () // ascunde toate DIV-urile cu containerul CLASS // și afișează cu ID-ul "home" numai $ (" ) css ("display", "block"); // face munca de navigare după ce toate containerele au ascuns albine showViaLink ($ ("ul # navigation li a")); // ascultă pentru orice activitate de navigare apasă tasta $ (document) .keypress (funcția (e) comutator (e.which) // utilizatorul apasă cazul "a" 97: showViaKeypress ("# home"); Cuvântul cheie "s" 115: showViaKeypress ("# about"); break; // utilizatorul apasă tasta "d" 100: showViaKeypress ("# contact"); : showViaKeypress ("# awards"); break; // utilizatorul apasă tasta "g" 103: showViaKeypress ("# links");););

Pasul 8

Acum că avem toate piesele puzzle-ului, putem să le punem împreună. Iată ce ar trebui să arate ultima iterație a scenariului nostru:

$ (document) .ready (funcția () // ascunde toate DIV-urile cu containerul CLASS // și afișează cu ID-ul "home" numai $ (" ) css ("display", "block"); // face munca de navigare după ce toate containerele au ascuns albine showViaLink ($ ("ul # navigation li a")); // ascultă pentru orice activitate de navigare apasă tasta $ (document) .keypress (funcția (e) comutator (e.which) // utilizatorul apasă cazul "a" 97: showViaKeypress ("# home"); Cuvântul cheie "s" 115: showViaKeypress ("# about"); break; // utilizatorul apasă tasta "d" 100: showViaKeypress ("# contact"); : showViaKeypress ("# awards"); break; // utilizatorul apasă tasta "g" 103: showViaKeypress ("# links"););); // arată un element dat și ascunde toate celelalte funcții showViaKeypress (element_id) $ (". container") css ("display", "none"); $ (Element_id) .slideDown ( "lent");  // afișează DIV-ul corespunzător în funcție de funcția "href" a linkului showViaLink (array) array.each (funcția (i) $ (this) .click (function () var target = "); $ (" container "); css (" display "," none "); $ (target) .slideDown (" slow ");

Demo

Aruncați o privire la scenariul în acțiune pe această pagină demo.
Modelul folosit în acest demo a fost realizat de Taylor Satula.

ENDE

Cod