Kaip pridėti klaviatūros nuorodas į savo svetainę

Patinka klaviatūros klavišai? Jie gali padėti jums sutaupyti daug laiko, tiesa? Ar norite pridėti klaviatūros nuorodas į savo svetainę lankytojų labui? Tai labai pagerintų jūsų svetainės prieinamumą ir navigaciją.

Šiame pranešime pateiksiu trumpą vadovą, kaip pridėti nuorodų į savo tinklalapį naudojant „JavaScript“ biblioteką, pavadintą „Mousetrap“. Su Mousetrap galite nustatyti raktus kaip „Shift“, „Ctrl“, „Alt“, „Options“ ir „Command to“ atlikti konkrečias jūsų svetainės funkcijas. Jis taip pat gerai veikia senesnėse naršyklėse.

Daugiau apie „Hongkiat“:

• „Hint.Css“ lengvai kurkite animuotus įrankių patarimus
• Žingsnis po žingsnio kūrimo naudojant intro.Js [Tutorial]
• Kaip sukurti HTML5 diapazono slankiklį
• Kaip naudotis slapukų & HTML5 vietiniu talpinimu

Darbo pradžia

Pradėkite kurti naują HTML dokumentą kartu su turiniu ir susieti pelės užrakto biblioteką. Aš naudosiu „CDNjs“ prieglobos biblioteką, kad biblioteka būtų aptarnaujama per „CloudFlare“ tinklą, kuris turėtų būti greitesnis nei mūsų serveris

Dabar mes naudosime pelės kilpą 'įpareigoti' būdas pridėti klaviatūros klavišus su funkcija. Galite priskirti vieną klavišą, klavišų kombinaciją arba sekos raktus, pavyzdžiui

Vienas raktas

Šiame pavyzdyje mes siejame s.

 Mousetrap.bind ('s', funkcija (e) // jūsų funkcija čia…)); 

Kombinacijos raktas

Šiame pavyzdyje mes susiejame Ctrl ir s. Kad atliktumėte paskirtą funkciją, turėsite paspausti du klavišus.

 Mousetrap.bind („ctrl + s“, funkcija (e) // jūsų funkcija čia…); 

Sekos raktas

Šiame pavyzdyje naudotojas turės paspausti g ir tada s vėliau. Jei kuriate internetinį žaidimą, tai gali būti naudinga pridėjus slaptą paslėptą raktų kombinaciją.

 Mousetrap.bind („g s“, funkcija (e) // jūsų funkcija čia…); 

Naudojant pelės kilimėlį

Sukursime paprastą tinklalapį su keliais sparčiuosiais klavišais, leidžiančiais vartotojams pasiekti tam tikrą svetainės funkciją. Mes naudosime jQuery, kad būtų lengviau manipuliuoti HTML dokumentu ir pasirinkti HTML elementus.

Pradėkime nuo kažko paprasto.

Mes privalome susieti raktą, kuris leis vartotojui greitai sutelkti dėmesį į paieškos įvesties lauką.

1. Toliau pateikiamas ieškos HTML žymėjimas kartu su ID.

2. Toliau sukuriame funkciją, kuri bus orientuota į paieškos įvestį.

 funkcijos paieška () var search = $ ('# search'); search.val ("); search.focus (); 

3. Galiausiai, mes privalome raktą, kad vykdytume funkciją.

 Mousetrap.bind ('/', paieška); 

4. Tai tai. Dabar galėsite pereiti prie paieškos įvesties paspausdami / mygtuką.

Taip pat galite susieti klavišų kombinaciją, Ctrl / Cmd + F, kuris yra populiarus raktų spartusis klavišas, naudojamas paieškai daugelyje darbalaukio programų:

 Mousetrap.bind (['command + f', 'ctrl + f'], paieška); 

Naudojant pelės kilimėlį su „Bootstrap“

Lengvai integruoti pelės kilimėlį su rėmu, pavyzdžiui, „Bootstrap“. Šiame antrajame pavyzdyje parodysime pagalbos langą, kuriame bus rodomas tinklapyje esančių nuorodų sąrašas. Čia aš pasirinksiu „Bootstrap“ modalą, kad pateiktumėte sąrašą ir nurodytumėte? raktas, rodantis modalą.

Nors ? yra prieinama tik naudojant „Shift“ klavišą, privalomą tik? raktas yra pakankamas.

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

Dabar, kai paspausite? klavišas, pasirodys iššokantis langas.

Patarimas Efektyviam rišimui

Laikui bėgant, jūsų auganti klaviatūros klavišų kolekcija gali pradėti sugadinti jūsų kodą. Jei taip atsitiks, galite pridėti papildymą, kad galėtumėte “raktas” kodai būtų veiksmingesni. Jis pavadintas “susieti žodyną”. Pridėkite šį plėtinį po pirminės pelės užrakto bibliotekos, mousetrap.min.js.

Dabar vietoj to, kad atskirtumėte kiekvieną pagrindinį įpareigojimą, mes galėtume juos tvarkingai suskirstyti į vieną .įpareigoti() metodas, pavyzdžiui:

 Mousetrap.bind ('/': paieška, 't': Čivināšana, '?': Funkcija modal () $ ('# help'). Modal ('show');, 'j': funkcija next ( ) highLight ('j'), 'k': funkcija prev () highLight ('k')); 

Norint pasiekti išsamesnį įgyvendinimą, galite pamatyti atliktą demonstraciją. Demonstracijoje galite paspausti klavišą J arba K, kad pažymėtumėte įrašą, ir paspauskite T, jei norite pervardyti esamą įrašą, kurį pažymėjote.

• Peržiūrėti demonstraciją
• parsisiųsti