Miten lisätä pikanäppäimiä sivustoosi

Rakastatko pikanäppäimiä? Ne voivat auttaa sinua säästämään paljon aikaa, eikö? Haluatko lisätä pikanäppäimiä omalle sivustollesi kävijöiden eduksi? Se parantaisi sivustosi saavutettavuutta ja navigointia huomattavasti.

Tässä viestissä annan nopean oppaan siitä, miten voit lisätä pikakuvakkeita Web-sivullesi käyttämällä Mousetrap-nimistä JavaScript-kirjastoa. Hiirenloukku voit merkitä avaimet kuten Shift, Ctrl, Alt, Asetukset ja Komento suorittaa tiettyjä toimintoja sivustossasi. Se toimii myös vanhemmissa selaimissa.

Lisää Hongkiatista:

• Luodaan animoituja työkaluvihjeitä helposti Hint.Cssin avulla
• Vaiheittaisen oppaan rakentaminen Intro.Js: n avulla [Tutorial]
• HTML5-alueen liukusäädintä
• Evästeiden ja HTML5-paikannustietojen käyttäminen

Päästä alkuun

Aloita luomalla uusi HTML-dokumentti sisällön kanssa ja yhdistämällä Hiirenloukku-kirjasto. Käytän CDNjsissä sijaitsevaa Hiirenloukku-kirjastoa, jotta kirjasto palvelee CloudFlare-verkon kautta, jonka pitäisi olla nopeampi kuin oma palvelin

Nyt käytämme Hiirenloukkua 'sitoa' menetelmä näppäimistön näppäinten liittämiseksi toimintoon. Voit määrittää näppäintä, näppäinyhdistelmää tai sekvenssiavainta, esimerkiksi

Yhden avaimen

Tässä esimerkissä sidomme s.

 Mousetrap.bind ('s', toiminto (e) // sinun tehtäväsi tässä…)); 

Yhdistelmäavain

Tässä esimerkissä sidotaan Ctrl ja s. Sinun täytyy painaa näitä kahta näppäintä yhdessä suorittaaksesi nimetty toiminto.

 Mousetrap.bind ('ctrl + s', toiminto (e) // sinun tehtäväsi tässä…)); 

Sekvenssiavain

Tässä esimerkissä käyttäjän täytyy painaa g ja sitten s myöhemmin. Jos kehität web-pohjaista peliä, tämä voi olla hyödyllinen salaisen piilotetun avaimen yhdistelmän lisäämisessä.

 Mousetrap.bind ('g s', toiminto (e) // sinun tehtäväsi tässä…)); 

Hiirenloukku

Rakennamme yksinkertaisen WWW-sivun, jossa on muutamia pikanäppäimiä, joiden avulla käyttäjät voivat käyttää joitakin verkkosivuston toimintoja. Käytämme jQuery-ohjelmaa, jotta HTML-dokumentti voidaan manipuloida ja HTML-elementtejä valita.

Aloitetaan jotain helppoa.

Aiomme sitoa avaimen, jonka avulla käyttäjä voi keskittyä hakutulokenttään nopeasti.

1. Seuraavassa on hakusanan HTML-merkintä id.

2. Seuraavaksi luomme toiminnon, joka keskittyy hakutuloon.

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

3. Lopuksi sidomme avaimen toiminnon suorittamiseen.

 Mousetrap.bind ('/', haku); 

4. Se on se. Nyt sinun pitäisi pystyä navigoimaan hakutuloon painamalla / -näppäintä.

Vaihtoehtoisesti voit myös sitoa avainyhdistelmän, Ctrl / Cmd + F, joka on suosittu avainpikavalinta, jota käytetään monissa työpöytäsovelluksissa:

 Mousetrap.bind (['command + f', 'ctrl + f'], haku); 

Käyttämällä Hiirenloukku Bootstrapilla

Hiirenloukku on helppo integroida kehykseen, esimerkiksi Bootstrapiin. Tässä toisessa esimerkissä näytämme ohjeaiheikkunan, joka näyttää luettelon pikakuvakkeista, jotka ovat saatavilla verkkosivuilla. Tässä valitsen Bootstrap Modalin esittelemään luettelon ja nimeämään? näppäin näyttää modaalin.

Vaikkakin ? on käytettävissä vain Shift-näppäimellä, joka sitoo vain? avain on riittävä.

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

Nyt kun osut? -näppäintä, näyttöön tulee ponnahdusikkuna.

Vihje tehokasta sitomista varten

Ajan myötä kasvava valikoima pikanäppäimiä saattaa alkaa sekoittaa koodisi. Jos näin tapahtuu, voit lisätä laajennuksen “avaimen sitominen” koodit ovat tehokkaampia. Se on nimetty “sitoa sanakirjaa”. Lisää tämä laajennus ensisijaisen Hiirenloukakirjaston jälkeen, mousetrap.min.js.

Nyt sen sijaan, että erotettaisiin jokainen avaimen sitominen, voimme ryhmitellä ne yhteen .sitoa() menetelmä, kuten näin:

 Mousetrap.bind ('/': haku, 't': tweet, '?': Toiminto modal () $ ('# help'). Modal ('show');, 'j': toiminto seuraava ( ) highLight ('j'), 'k': toiminto prev () highLight ('k')); 

Tarkempaa toteutusta varten näet esittämäni demon. Demossa voit korostaa postin painamalla J- tai K-näppäintä ja piilottaa korostamasi nykyisen viestin painamalla T-näppäintä..

• Näytä demo
• ladata