Accentsconagua

Slik oppretter du en tastaturnavigasjon ved hjelp av jQuery

Kode
Share

Nøkkelen til et vellykket nettsted er det enkle som en bruker finner det de leter etter. Dermed er det verdt å bruke mye tid og krefter ved å skape både nyttige og visuelt tiltalende navigasjonssystemer. I det siste har jeg begynt å eksperimentere med nye måter å navigere på et nettsted. I denne veiledningen viser jeg deg hvordan du lar brukeren bruke tastaturet til å komme rundt på nettstedet ditt.

Trinn 1

Det første vi må gjøre er å lage vår testside. I dette tilfellet vil jeg referere til det som demo.html og det vil inneholde følgende:

  1. En link til jQuery-rammen.
  2. En kobling til skriptet vi vil jobbe med senere. La oss kalle det keypress_nav.js
  3. En kobling til en CSS-fil som heter style.css (vi vil også jobbe med dette senere).
  4. En header div som vil inneholde vår navigasjon blant annet. Og
  5. Fem unike div elementer som vil tjene som sider for nettstedet vårt.

Så, her er hva demo.html ser ut på dette punktet:

   KeyPress Navigation Demo       
  
 
 
Velkommen!
 
Noen tekst
 
 
 
Om meg
 
Noen tekst
 
 
 
Ingen Spam Vennligst
 
Noen tekst
 
 
 
Utmerkelser, så mange ... 
 
Noen tekst
 
 
 
Cool nettsteder
 
Noen tekst

Steg 2

Nå som vi har våre DIV på plass, kan vi gå videre og opprette navigasjonen til siden. Som du kanskje har gjettet, vil vi bruke en uordnet liste

    å holde linkene og DIVs ID-er som målene for disse linkene. Også, vi vil legge til klassen container til alle DIV-sidene. Denne klassen vil hjelpe oss med å enkelt henvise til disse DIV-ene når vi lager skriptet vårt. Så, her er hva du burde ha nå:

       KeyPress Navigation Demo       
     
       
    • Hjem (a)
      •  
    • Om (e)
      •  
    • Kontakt (d)
      •  
    • Utmerkelser (f)
      •  
    • Lenker (g)
      •  
     
     
     
    Velkommen!
     
    Noen tekst
     
     
     
    Om meg
     
    Noen tekst
     
     
     
    Ingen Spam Vennligst
     
    Noen tekst
     
     
     
    Utmerkelser, så mange ... 
     
    Noen tekst
     
     
     
    Cool nettsteder
     
    Noen tekst

    Merk: Brevet (nøkkelen) inne parentesen er nøkkelen vi senere vil bruke som navigasjon for vår side.

    Trinn 3

    Strukturen på vår testside er nå fullført, men mangler visuell appell. Så la oss legge til noe CSS og jazz det opp. En ting å huske på før vi begynner stylingen er at vår side må se bra ut selv om JavaScript er slått av. Skript, etter min mening, bør alltid brukes som en bonus til de brukerne som har JavaScript slått på, men bør ikke fremmedgjøre de som ikke gjør det. Vi er nettdesignere / utviklere, og vi bryr oss om brukervennlighet, akkurat?

    Du kan se utseendet vi skal på i skjermbildet over. Det er enkelt og bruker noen fine, dristige farger for å markere de forskjellige seksjonene. Så her er vår CSS:

    kropp margin: 0; polstring: 0; font-familie: "Lucida Grande", "Lucida Sans", sans-serif; skriftstørrelse: 100%; bakgrunn: # 333;  /* Overskrift ---------------------------------------------- ---- * / #header width: 460px; margin: 0 auto; skriftstørrelse: .75em; font-familie: "Helvetica Neue", Helvetica, sans-serif;  #header ul listestil: none; margin: 0; polstring: 0;  #header ul li float: left; tekstjustering: venstre;  #header ul li a display: block; farge: # ffff66; tekst-dekorasjon: ingen; tekst-transformer: store bokstaver; margin-høyre: 20px;  #header ul li a: hover text-decoration: understreke; farge: # ffcc66;  / * Containere ---------------------------------------------- ---- * / .container width: 400px; høyde: 300px; margin: 30px auto; polstring: 10px 20px; grense: 10px solid #fff; farge: #fff; skriftstørrelse: .75em; linjehøyde: 2em;  .container h2 polstring: 5px 10px; bredde: 200px;  #home bakgrunn: # 15add1;  #home h2 bakgrunn: # 007aa5;  #om bakgrunn: # fdc700;  # om h2 bakgrunn: # bd9200;  #contact background: # f80083;  #contact h2 bakgrunn: # af005e;  #awards background: # f18300;  #awards h2 bakgrunn: # bb5f00;  #links bakgrunn: # 98c313;  #links h2 bakgrunn: # 6f9a00;  / * Selvregleringsregler ------------------------------------------- ------- * / ul # navigasjon: etter innhold: "."; skjerm: blokk; synlighet: skjult; klare: begge; høyde: 0;  * html ul # navigasjon høyde: 1px;  ul # navigasjon min-høyde: 1px;

    Merk: Jeg har lagt til noen selvklarende regler for navigasjonen for å kunne arbeide rundt sin mangel på høyde på grunn av sine indre flytede elementer. Med andre ord vil margaregler fra den øverste beholderen nå ha den riktige effekten på navigasjonen

      .

      Trinn 5

      På dette tidspunktet i opplæringen bør du ha en side som ser noe ut som dette:

      Det er en funksjonell side, og det fungerer riktig uten at JavaScript må slås på. Men som sagt tidligere, la oss gi en liten bonus til de brukerne som har JavaScript slått på på nettleserne sine. Vi vil gjøre dette i to trinn. For det første vil vi opprette to funksjoner som vil gjemme og vise sidene med rette. Og for det andre vil vi legge til litt kode for å bestemme tastene trykket av brukeren. La oss nå lage en fil som heter keypress_nav.js og få jobb på våre funksjoner.

      Trinn 6

      Vi skal ha to funksjoner for at vårt skript skal kunne fungere som ønsket. En av funksjonene vil bli kalt når brukeren trykker på en av våre forhåndsdefinerte navigasjonstaster (bokstavene i parentes fra trinn 2) og vil gjemme alle andre beholdere som bare viser DIV tilknyttet denne nøkkelen. Slik ser vår første funksjon ut:

      funksjon showViaKeypress (element_id) $ (".container"). css ("display", "none"); $ (Element_id) .slideDown ( "slow");

      Nå vil vår andre funksjon ta en rekke lenker og tilordne dem til klikkmålfunksjoner. Med andre ord vil funksjonen få våre navigasjonskoblinger, hente "href" -attributtet og vise passende DIV ved å klikke på den. Så, her er hva den andre funksjonen ser ut som:

      funksjon showViaLink (array) array.each (funksjon (i) $ (dette) .click (funksjon () var mål = $ (dette) .attr ("href"); $ ("container"). ("display", "none"); $ (target) .slideDown ("slow");););

      Trinn 7

      Nå som vi har kodet våre funksjoner, må vi ringe dem ordentlig når siden laster. Det første vi må gjøre er å skjule alle elementene som har klasse container med unntak av DIV som har ID hjem. Deretter må vi ringe showViaLink () Fungerer med koblingene inne i vår navigasjon

        som parameter. Sist men ikke minst må vi lytte til brukerens tastetrykk og ringe til showViaPress () fungere med passende ID som parameter. Dette kan oppnås ved å bruke en bytte om på tastetrykket.

        Bryteren vil ha 5 saker (en for hver kobling) og nummeret tilsvarer ASCII-nummeret for tastetrykket. For eksempel, hvis "en" nøkkelen trykkes, bryteren vil bruke tilfelle 97. Så her ser koden ut: 

        $ (dokument) .ready (funksjon () // skjuler alle DIVer med CLASS-beholderen // og viser den med ID'en 'home' only $ (".container"). css ("display", "none" ); $ ("# home"). css ("display", "block"); // gjør navigeringsarbeidet etter at alle containere har bee skjult showViaLink ($ ("ul # navigasjon li a")); // lytter for hvilken som helst navigasjonstastetrykkaktivitet $ (dokument) .keypress (funksjon (e) switch (f.eks.) // bruker trykker på "a" saken 97: showViaKeypress ("# home"); pause; // bruker trykker på "s" nøkkeltaske 115: showViaKeypress ("# om"); pause; // bruker trykker på "d" nøkkelsaken 100: showViaKeypress ("# contact"); pause; // brukeren trykker på "f" nøkkelhuset 102 : showViaKeypress ("# award"); pause; // bruker trykker på "g" -tastetui 103: showViaKeypress ("# links");;;);

        Trinn 8

        Nå som vi har alle stykkene av puslespillet, kan vi sette det sammen. Her er hva den endelige iterasjonen av skriptet vårt skal se ut:

        $ (dokument) .ready (funksjon () // skjuler alle DIVer med CLASS-beholderen // og viser den med ID'en 'home' only $ (".container"). css ("display", "none" ); $ ("# home"). css ("display", "block"); // gjør navigeringsarbeidet etter at alle containere har bee skjult showViaLink ($ ("ul # navigasjon li a")); // lytter for hvilken som helst navigasjonstastetrykkaktivitet $ (dokument) .keypress (funksjon (e) switch (f.eks.) // bruker trykker på "a" saken 97: showViaKeypress ("# home"); pause; // bruker trykker på "s" nøkkeltaske 115: showViaKeypress ("# om"); pause; // bruker trykker på "d" nøkkelsaken 100: showViaKeypress ("# contact"); pause; // brukeren trykker på "f" nøkkelhuset 102 : showViaKeypress ("# award"); pause; // bruker trykker på "g" -tastetui 103: showViaKeypress ("# links");;;); // viser et gitt element og gjemmer alle andre funksjonsshowViaKeypress (element_id) $ (".container"). css ("display", "none"); $ (Element_id) .slideDown ( "slow");  // viser riktig DIV avhengig av link'href'-funksjonen showViaLink (array) array.each (funksjon (i) $ (dette) .click (funksjon () var mål = $ (dette) .attr ("href css ("display", "none"); $ (target) .slideDown ("slow");););

        Demo

        Ta en titt på skriptet i aksjon på denne demosiden.
        Mønsteret som ble brukt i denne demoen ble laget av Taylor Satula.

        ENDE

        Kode
×