Kuidas lisada oma veebisaidile kiirklahve

Kas armastad kiirklahve? Nad aitavad teil säästa palju aega, eks? Kas sooviksite oma veebisaidile klaviatuuri otseteid oma külastajate huvides lisada? See parandaks oluliselt teie saidi juurdepääsetavust ja navigeerimist.

Selles postituses annan kiireid juhiseid selle kohta, kuidas lisada oma veebilehele otseteid, kasutades JavaScripti raamatukogu nimega Mousetrap. Hiirelõksuga saate võtmed nagu Shift, Ctrl, Alt, Valikud ja Käsk täita oma veebisaidil teatud funktsioone. See toimib hästi ka vanemate brauserite puhul.

Veel Hongkiatist:

• Animeeritud tööriista loomine Hint.Cssiga
• Samm-sammulise juhendi loomine Intro.Js abil [Õpetus]
• Kuidas kujundada HTML5 vahemiku liugurit
• Kuidas kasutada küpsiseid ja HTML5 kohalikku asukohta

Alustamine

Alustage uue HTML-dokumendi loomisega koos sisuga ja ühendage hiirelõikusraamatukogu. Ma kasutan CDNjsis majutatud hiireluku raamatukogu, nii et raamatukogu serveeritakse CloudFlare'i võrgu kaudu, mis peaks olema kiirem kui meie enda server

Nüüd kasutame hiirelõksu "siduda" meetod klaviatuuriklahvide kinnitamiseks funktsiooniga. Võite määrata ühe klahvi, klahvikombinatsiooni või jada võtmed, näiteks

Ühe võtmega

Selles näites seome me s.

 Mousetrap.bind ('s', funktsioon (e) // teie funktsioon siin…); 

Kombineeritud võti

Selles näites seome Ctrl ja s. Määratud funktsiooni täitmiseks peate vajutama kaks klahvi.

 Mousetrap.bind ('ctrl + s', funktsioon (e) // teie funktsioon siin…); 

Järjestuse võti

Selles näites peab kasutaja vajutama nuppu g ja seejärel s hiljem. Kui te arendate veebipõhist mängu, võib see olla kasulik salajase peidetud võtme kombinatsiooni lisamiseks.

 Mousetrap.bind ('g s', funktsioon (e) // teie funktsioon siin…); 

Hiireluku kasutamine

Me ehitame lihtsa veebilehe, millel on paar klaviatuuri otseteed, mis võimaldavad kasutajatel mõningaid veebisaidi funktsioone kasutada. Me kasutame jQueryt, et lihtsustada HTML-dokumendi manipuleerimist ja HTML-elementide valimist.

Alustame midagi lihtsast.

Me kohustume siduma võtit, mis võimaldab kasutajal kiiresti otsingutulemuste väljale keskenduda.

1. Järgmine on otsingu HTML-märgistus koos id.

2. Seejärel loome funktsiooni, mis keskendub otsingu sisendile.

 funktsiooni otsing () var search = $ ('# search'); search.val ("); search.focus (); 

3. Lõpuks seovame funktsiooni käivitamiseks võtme.

 Mousetrap.bind ('/', otsing); 

4. See on see. Nüüd peaksite saama otsingu sisendile liikuda, vajutades / nuppu.

Teise võimalusena võite siduda ka klahvikombinatsiooni, Ctrl / Cmd + F, mis on populaarne võtme otsetee, mida kasutatakse paljudes töölauarakendustes:

 Mousetrap.bind (['käsk + f', 'ctrl + f'], otsing); 

Hiireluku kasutamine Bootstrapiga

Hiirelõks on lihtne integreerida raamiga, näiteks Bootstrap. Selles teises näites kuvame abiakna, mis kuvab veebisaidil olevate otseteede loendi. Siin valin loendi esitamiseks Bootstrap Modali ja määrab selle? võtme näitamiseks.

Kuigi ? on saadaval ainult Shift-klahviga, mis on siduv ainult? võti on piisav.

 Mousetrap.bind ('?', Funktsioon () $ ('# help'). Modal ('show');); 

Nüüd, kui vajutad? klahvile ilmub hüpik.

Vihje tõhusa sidumise jaoks

Aja jooksul võib teie kasvav klaviatuuri otseteede kogumine teie koodi segi ajada. Kui see juhtub, on olemas laiend, mida saate lisada “võtme sidumine” koodid on tõhusamad. Seda nimetatakse nimeks “siduda sõnastikku”. Lisage see laiendus pärast esmast Hiirelõksute raamatukogu, mousetrap.min.js.

Nüüd, selle asemel, et eraldada iga võtme sidumist, saame need puhtalt rühmitada .siduma () meetod, näiteks:

 Mousetrap.bind ('/': otsing, 't': piiksuma, '?': Funktsiooni modal () $ ('# help'). Modal ('show');, 'j': funktsioon järgmine ( ) highLight ('j'), 'k': funktsioon prev () highLight ('k')); 

Täpsema rakenduse jaoks näete demot, mida olen teinud. Demos saate postituse esiletõstmiseks vajutada klahvi J või K ja vajutada klahvi T, et näidata praegust postitust, mille olete esile tõstnud.

• Kuva demo
• Lae alla