Hur man skapar en knapptryckningssökning med jQuery

Nyckeln till en framgångsrik webbplats är den lätthet som en användare finner vad de letar efter. Således är det värt att spendera mycket tid och ansträngning för att skapa både användbara och visuellt tilltalande navigationssystem. På senare tid har jag börjat experimentera med nya sätt att navigera på en webbplats. I den här handledningen visar jag dig hur du låter användaren använda tangentbordet för att komma runt din webbplats.

Steg 1

Det första vi behöver göra är att skapa vår testsida. I det här fallet kommer jag att hänvisa till det som demo.html och det kommer att innehålla följande:

En länk till jQuery-ramen.
En länk till manuset kommer vi att arbeta på senare. Låt oss kalla det keypress_nav.js
En länk till en CSS-fil som heter style.css (vi kommer också att arbeta på detta senare).
En header div som bland annat kommer att innehålla vår navigering. Och
Fem unika div-element som kommer att fungera som sidor för vår webbplats.

Så, här är vad demo.html ser ut på denna punkt:

   KeyPress Navigation Demo         
  Välkommen!
 Några text
 
  Om mig
 Några text
 
  Ingen Spam Vänligen
 Några text
 
  Utmärkelser, så många ... 
 Några text
 
  Coola platser
 Några text

Steg 2

Nu när vi har våra DIV på plats kan vi fortsätta och skapa navigeringen för sidan. Som du kanske har gissat använder vi en oorderad lista

behållare

   KeyPress Navigation Demo         Hem (a)
 Om (s)
 Kontakt (d)
 Utmärkelser (f)
 Länkar (g)
 
 
  Välkommen!
 Några text
 
  Om mig
 Några text
 
  Ingen Spam Vänligen
 Några text
 
  Utmärkelser, så många ... 
 Några text
 
  Coola platser
 Några text

Notera: Brevet (nyckel) inuti parentesen är nyckeln som vi senare använder som navigering för vår sida.

Steg 3

Strukturen på vår testsida är nu komplett men saknar visuell överklagande. Så, låt oss lägga till några CSS och jazz upp det. En sak att komma ihåg innan vi börjar stylingen är att vår sida måste se bra ut även om JavaScript är avstängt. Skript, enligt min mening, bör alltid användas som en bonus till de användare som har JavaScript aktiverat men borde inte alienera de som inte gör det. Vi är ju webbdesigners / utvecklare, och vi bryr oss om användbarhet, rätt?

Du kan se det utseende vi ska ha på skärmbilden ovan. Det är enkelt och använder några fina, djärva färger för att markera de olika sektionerna. Så här är vår CSS:

kropp marginal: 0; vaddering: 0; font-family: "Lucida Grande", "Lucida Sans", sans-serif; typsnittstorlek: 100%; bakgrund: # 333;  / * Rubrik ---------------------------------------------- ---- * / #header width: 460px; marginal: 0 auto; typsnittstorlek: .75em; font-family: "Helvetica Neue", Helvetica, sans-serif;  #header ul listestil: none; marginal: 0; vaddering: 0;  #header ul li float: left; text-align: left;  #header ul li a display: block; färg: # ffff66; text-dekoration: ingen; text-transform: stor bokstav; marginal-höger: 20px;  #header ul li a: svävar text-decoration: underline; färg: # ffcc66;  / * Containrar ---------------------------------------------- ---- * / .container width: 400px; höjd: 300px; marginal: 30px auto; vaddering: 10px 20px; gränsen: 10px solid #fff; färg: #fff; typsnittstorlek: .75em; linjehöjd: 2em;  .container h2 vaddering: 5px 10px; bredd: 200px;  #home bakgrund: # 15add1;  #home h2 bakgrund: # 007aa5;  #om bakgrund: # fdc700;  # om h2 bakgrund: # bd9200;  #contact background: # f80083;  #contact h2 background: # af005e;  #awards background: # f18300;  #awards h2 background: # bb5f00;  #links background: # 98c313;  #links h2 background: # 6f9a00;  / * Självrensningsregler ------------------------------------------- ------- * / ul # navigering: efter innehåll: "."; display: block; synlighet: gömd; klara: båda; höjd: 0;  * html ul # navigering höjd: 1px;  ul # navigering min-höjd: 1px;

Notera: Jag har lagt till några självklarande regler för navigering för att arbeta runt sin brist på höjd på grund av dess inre flytande element. Med andra ord kommer marginalregler från den övre mest behållaren nu att ha den korrekta effekten på navigeringen

Steg 5

Vid denna punkt i handledningen borde du ha en sida som ser något ut så här:

Det är en funktionell sida och det fungerar korrekt utan att JavaScript måste vara på. Men som sagt tidigare, låt oss ge en liten bonus till de användare som har JavaScript aktiverat på sina webbläsare. Vi gör det i två steg. För det första kommer vi att skapa två funktioner som kommer att gömma och visa sidorna lämpligt. Och för det andra kommer vi att lägga till lite kod för att bestämma nycklarna som trycks av användaren. Låt oss nu skapa en fil som heter keypress_nav.js och börja arbeta med våra funktioner.

Steg 6

Vi behöver två funktioner för att vårt skript ska fungera som önskat. En av funktionerna kommer att ringas när användaren trycker på en av våra förutbestämda navigeringstangenter (bokstäverna i parentes från steg 2) och kommer att gömma alla andra behållare som bara visar DIV som är associerade med den här tangenten. Så här ser vår första funktion ut:

funktion showViaKeypress (element_id) $ (".container"). css ("display", "none"); $ (Element_id) .slideDown ( "långsam");

Nu kommer vår andra funktion att ta en rad länkar och tilldela dem på klickmålfunktioner. Med andra ord kommer funktionen att få våra navigeringslänkar, hämta attributet "href" och visa lämplig DIV när du klickar på den. Så här ser den andra funktionen ut:

funktion showViaLink (array) array.each (funktion (i) $ (detta) .click (funktion () var target = $ (this) .attr ("href"); $ ("behållare"). ("display", "none"); $ (target) .slideDown ("slow");););

Steg 7

Nu när vi har kodade våra funktioner måste vi ringa dem när de laddas. Det första vi behöver göra är att dölja alla element som har klass behållare med undantag för DIV som har ID Hem. Därefter måste vi ringa showViaLink () funktionen med länkarna inuti vår navigering

showViaPress ()

växla

Omkopplaren kommer att ha 5 fall (en för varje länk) och dess nummer motsvarar ASCII-numret för knapptrycket. Till exempel, om "en" tangenten trycks in, omkopplaren kommer att använda fallet 97. Så här ser koden ut:

$ (dokument) .ready (funktion () // döljer alla DIVs med CLASS-behållaren // och visar den med ID-hemmet endast $ (".container"). css ("display", "none" ); $ ("# home"). css ("display", "block"); // gör navigationsarbetet efter alla behållare har bee hidden showViaLink ($ ("ul # navigation li a")); // lyssnar för alla navigeringsnycklaraktivitet $ (dokument) .keypress (funktion (e) switch (e.which) // användare trycker på "a" -höljet 97: showViaKeypress ("# home"); break; // användaren trycker på "s" nyckelfodral 115: showViaKeypress ("# om"); break; // användaren trycker på "d" -nyckeln 100: showViaKeypress ("# contact"); : showViaKeypress ("# awards"); break; // användaren trycker på g-tangenthöljet 103: showViaKeypress ("# links");););

Steg 8

Nu när vi har alla pusselbitar kan vi lägga den ihop. Här är vad den sista iterationen av vårt manus ska se ut:

$ (dokument) .ready (funktion () // döljer alla DIVs med CLASS-behållaren // och visar den med ID-hemmet endast $ (".container"). css ("display", "none" ); $ ("# home"). css ("display", "block"); // gör navigationsarbetet efter alla behållare har bee hidden showViaLink ($ ("ul # navigation li a")); // lyssnar för alla navigeringsnycklaraktivitet $ (dokument) .keypress (funktion (e) switch (e.which) // användare trycker på "a" -höljet 97: showViaKeypress ("# home"); break; // användaren trycker på "s" nyckelfodral 115: showViaKeypress ("# om"); break; // användaren trycker på "d" -nyckeln 100: showViaKeypress ("# contact"); : showViaKeypress ("# awards"); break; // användaren trycker på g-tangenthöljet 103: showViaKeypress ("# links"););); // visar ett givet element och döljer alla andra funktion showViaKeypress (element_id) $ (".container"). css ("display", "none"); $ (Element_id) .slideDown ( "långsam");  // visar korrekt DIV beroende på länk 'href' funktion showViaLink (array) array.each (funktion (i) $ (this) .click (function () var target = $ (this) .attr ("href css ("display", "none"); $ (target). slideDown ("slow");););

demo

Ta en titt på manuset i aktion på den här demoversidan.
Mönstret som användes i denna demo gjordes av Taylor Satula.

ENDE

Koda