Kako dodati bližnjice na vašo spletno stran

Ljubite bližnjice na tipkovnici? Lahko vam pomagajo prihraniti veliko časa, kajne? Želite dodati bližnjice na svoje spletno mesto v korist vaših obiskovalcev? To bi znatno izboljšalo dostopnost in navigacijo vašega spletnega mesta.

V tej objavi vam bom dal kratek vodnik o tem, kako dodati bližnjice na vašo spletno stran z uporabo knjižnice JavaScript, imenovane Mišolovka. Z Mišolovko lahko določite ključe kot so Shift, Ctrl, Alt, Options in Command to opravlja določene funkcije na vaši spletni strani. Prav tako dobro deluje v starejših brskalnikih.

Več o storitvi Hongkiat:

• Enostavno ustvarjanje animiranega opisa orodij s Hint.Css
• Izdelava vodnika po korakih z uporabo Intro.Js [Vadnica]
• Kako oblikovati drsnik za območje HTML5
• Kako uporabljati piškotek & lokalno shrambo HTML5

Kako začeti

Začnite z ustvarjanjem novega dokumenta HTML skupaj z vsebino in povezovanjem knjižnice Mousetrap. Uporabljala bom knjižnico Mousetrap, ki bo gostila v CDNjs, tako da bo knjižnica strežena prek omrežja CloudFlare, ki mora biti hitrejši od našega lastnega strežnika.

Zdaj bomo uporabili mišolovko "vezati" način za priključitev tipk na tipkovnici s funkcijo. Lahko dodelite tipko, kombinacijo tipk ali zaporedje tipk, na primer

Enotni ključ

V tem primeru vežemo s.

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

Kombinacijski ključ

V tem primeru povežemo Ctrl in s. Za izvedbo določene funkcije boste morali pritisniti obe tipki skupaj.

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

Zaporedni ključ

V tem primeru mora uporabnik pritisniti g in nato s naknadno. Če razvijate spletno igro, je to lahko koristno za dodajanje skrivnega skritega ključa.

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

Z mišnico

Izdelali bomo preprosto spletno stran z nekaj bližnjicami na tipkovnici, ki uporabnikom omogočajo dostop do nekaterih funkcij na spletnem mestu. Uporabili bomo jQuery, da boste lažje manipulirali z dokumentom HTML in izbrali elemente HTML.

Začnimo z nečim lahkim.

Priključili bomo ključ, ki bo uporabniku omogočil, da se hitro osredotoči na vnosno polje za iskanje.

1. V nadaljevanju je oznaka HTML za iskanje skupaj z oznako id.

2. Nato ustvarimo funkcijo, ki se bo osredotočila na vnos iskanja.

 funkcija iskanje () var search = $ ('# search'); search.val ("); search.focus (); 

3. Nazadnje, povežemo ključ za zagon funkcije.

 Mousetrap.bind ('/', iskanje); 

4. To je to. Sedaj bi morali imeti možnost, da se pomaknete do vnosa za iskanje s pritiskom na gumb /.

Lahko pa tudi povežete kombinacijo tipk, Ctrl / Cmd + F, ki je priljubljena ključna bližnjica za iskanje v mnogih namiznih aplikacijah:

 Mousetrap.bind (['ukaz + f', 'ctrl + f'], iskanje); 

Z mišnico z zagonskim trakom

Miško lahko enostavno vključite v okvir, na primer Bootstrap. V tem drugem primeru bomo prikazali okno s pomočjo, ki bo prikazalo seznam bližnjic, ki so na voljo na spletnem mestu. Tukaj se odločim za Bootstrap Modal, da predstavim seznam in določim? za prikaz modala.

Čeprav? je dostopna samo s tipko Shift, ki povezuje samo? zadostuje.

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

Zdaj, ko si zadel? se prikaže pojavno okno.

Nasvet Za učinkovito vezavo

Sčasoma lahko vaša rastoča zbirka bližnjic na tipkovnici začne zmešati vašo kodo. Če se to zgodi, lahko dodate dodatek, s katerim lahko ustvarite svoj “ključem” učinkovitejši. Imenuje se “povezati slovar”. Dodajte to razširitev za primarno knjižnico Mousetrap, mousetrap.min.js.

Zdaj, namesto da ločimo vsako ključno vezavo, jih lahko lepo združimo v eno .bind () metodo, na primer:

 Mousetrap.bind ('/': iskanje, 't': tweet, '?': Funkcija modal () $ ('# help'). Modal ('show');, 'j': funkcija naslednji ( ) highLight ('j'), 'k': funkcija prev () highLight ('k')); 

Za naprednejšo izvedbo si lahko ogledate demo, ki sem ga naredil. V predstavitvi lahko pritisnete tipko J ali K, da označite objavo, in pritisnite T, da objavite trenutno objavo, ki ste jo označili..

• Prikaži predstavitev
• Prenesi