Kako dodati prečice na tipkovnici na Vašu web stranicu

Volite tipkovničke prečace? Oni vam mogu pomoći uštedjeti mnogo vremena, zar ne? Želite li dodati prečice na tipkovnici na vlastitu web-lokaciju u korist svojih posjetitelja? To bi uvelike poboljšalo dostupnost i navigaciju vaše web-lokacije.

U ovom će postu dati kratki vodič o tome kako dodati prečace do vaše web-stranice pomoću JavaScript biblioteke pod nazivom Mišolovka. S mišolovkom možete odrediti ključeve kao Shift, Ctrl, Alt, Options i Command to obavljati određene funkcije na Vašoj web stranici. Također radi dobro u starijim preglednicima.

Više o Hongkiatu:

• Stvaranje animiranih tooltip lako s Hint.Css
• Izrada vodiča korak po korak pomoću Intro.Js [Tutorial]
• Kako oblikovati klizač raspona HTML5
• Kako koristiti kolačiće i lokalno spremanje HTML5

Početak rada

Započnite stvaranjem novog HTML dokumenta zajedno sa sadržajem i povezivanjem knjižnice mišolovke. Koristit ću knjižnicu mišolovki koja je smještena u CDNjs tako da se knjižnica poslužuje putem CloudFlare mreže koja bi trebala biti brža od našeg poslužitelja.

Sada ćemo koristiti mišolovku 'vezati' način za priključivanje tipki tipkovnice s funkcijom. Možete dodijeliti jednu tipku, kombinaciju tipki ili tipke slijeda, na primjer

Jedan ključ

U ovom primjeru vežemo s.

 Mousetrap.bind ('s', funkcija (e) // vaša funkcija ovdje ...); 

Ključ kombinacije

U ovom primjeru vežemo Ctrl i s. Morat ćete pritisnuti dvije tipke zajedno kako biste izvršili određenu funkciju.

 Mousetrap.bind ('ctrl + s', funkcija (e) // vaša funkcija ovdje ...); 

Slijedni ključ

U ovom primjeru korisnik će morati pritisnuti g, a zatim a naknadno. Ako razvijate web-baziranu igru, to bi moglo biti korisno za dodavanje tajnog skrivenog kombiniranog ključa.

 Mousetrap.bind ('g s', funkcija (e) // vaša funkcija ovdje); 

Korištenjem mišolovke

Napravit ćemo jednostavnu web-stranicu s nekoliko tipkovnih prečaca koji korisnicima omogućuju pristup određenim funkcijama na web-lokaciji. Koristit ćemo jQuery kako bismo lakše manipulirali HTML dokumentom i odabrali HTML elemente.

Počnimo s nečim lakim.

Vezat ćemo ključ koji će korisniku omogućiti da se brzo fokusira na polje za unos pretraživanja.

1. Slijedi HTML oznaka za pretraživanje zajedno s oznakom iskaznica.

2. Zatim kreiramo funkciju koja će se fokusirati na unos pretraživanja.

 pretraživanje funkcija () var search = $ ('# search'); search.val ("); search.focus (); 

3. Na kraju, mi vežemo ključ za pokretanje funkcije.

 Mousetrap.bind ('/', pretraživanje); 

4. To je to. Sada biste trebali moći pristupiti unosu za pretraživanje pritiskom na tipku /.

Alternativno, možete također povezati kombinaciju tipki, Ctrl / Cmd + F, što je popularna ključna prečica koja se koristi za pretraživanje u mnogim aplikacijama za stolna računala:

 Mousetrap.bind (['naredba + f', 'ctrl + f'], pretraživanje); 

Korištenje mišolovke s Bootstrap

Lako je integrirati mišolovku s okvirom, na primjer, Bootstrap. U ovom drugom primjeru prikazat ćemo prozor pomoći koji će prikazati popis prečaca dostupnih na web-lokaciji. Evo, odlučujem se za Bootstrap Modal kako bih predstavio popis i odredio? za prikaz modala.

Iako ? je dostupno samo pomoću tipke Shift, povezujući samo? je dovoljan.

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

Sada kada ste pogodili? , pojavit će se skočni prozor.

Savjet Za učinkovito povezivanje

S vremenom, vaša rastuća zbirka tipkovničkih prečaca može početi zabrljati vaš kôd. Ako se to dogodi, postoji proširenje koje možete dodati kako biste napravili svoj “uvezivanje ključa” učinkovitiji. Ime je dobilo “vezati rječnik”. Dodajte ovo proširenje nakon primarne knjižnice mišolovke, mousetrap.min.js.

Sada, umjesto odvajanja svakog ključa, možemo ih uredno grupirati u jednu .vezati() metoda, na primjer:

 Mousetrap.bind ('/': pretraživanje, 't': tweet, '?': Funkcija modal () $ ('# help'). Modal ('show');, 'j': funkcija sljedeća ( ) highLight ('j'), 'k': funkcija prev () highLight ('k')); 

Za napredniju implementaciju možete vidjeti demo koji sam napravio. U demo izvedbi možete pritisnuti tipku J ili K da biste označili post, a zatim pritisnite T da biste objavili trenutni post koji ste označili.

• Prikaži demo
• preuzimanje datoteka