no.hideout-lastation.com
Paradis For Designere Og Utviklere


Slik legger du til tastaturgenveier til nettstedet ditt

Elsker tastaturgenveier? De kan hjelpe deg med å spare mye tid, ikke sant? Vil du legge til tastatursnarveier til ditt eget nettsted, til fordel for dine besøkende? Det ville forbedre nettstedets tilgjengelighet og navigasjon betydelig.

I dette innlegget vil jeg gi en rask guide til hvordan du legger til snarveier til nettsiden din ved hjelp av et JavaScript-bibliotek som heter Mousetrap. Med Mousetrap kan du angi nøkler som Shift, Ctrl, Alt, Options og Command for å utføre bestemte funksjoner på nettstedet ditt . Det fungerer også bra over eldre nettlesere.

Mer om Hongkiat:

  • Opprett animert verktøytips enkelt med Hint.Css
  • Bygg en trinnvis veiledning ved å bruke Intro.Js [Tutorial]
  • Slik stiler du HTML5-spekterets skyveknapp
  • Slik bruker du informasjonskapsler og HTML5 lokalstorage

Starter

Begynn med å lage et nytt HTML-dokument sammen med innholdet, og knytte Mousetrap-biblioteket. Jeg vil bruke Mousetrap-biblioteket hostet i CDNjs slik at biblioteket blir servert gjennom CloudFlare-nettverket, som skal være raskere enn vår egen server

Nå skal vi bruke Mousetrap 'bind'- metoden for å legge tastaturtaster med funksjon. Du kan tilordne en enkelt tast, en tastekombinasjon eller sekvensnøkler, for eksempel

Enkeltnøkkel

I dette eksemplet binder vi s.

 Mousetrap.bind ('s', funksjon (e) {// din funksjon her ...}); 
Kombinasjonsnøkkel

I dette eksemplet binder vi Ctrl og s. Du må trykke på de to tastene for å utføre den angitte funksjonen.

 Mousetrap.bind ('ctrl + s', funksjon (e) {// din funksjon her ...}); 
Sekvensnøkkel

I dette eksemplet må brukeren trykke på g og deretter s senere. Hvis du utvikler webbasert spill, kan dette være nyttig for å legge til en hemmelig skjult nøkkelkombinasjon.

 Mousetrap.bind ('g s', funksjon (e) {// din funksjon her ...}); 

Bruke Mousetrap

Vi vil bygge en enkel nettside med et par hurtigtaster som lar brukerne få tilgang til noe funksjonalitet på nettstedet. Vi bruker jQuery for å gjøre det enklere å manipulere HTML-dokumentet og velge HTML-elementer.

La oss begynne med noe lett.

Vi skal binde en nøkkel som lar brukeren fokusere raskt på søkefeltet.

1. Følgende er HTML-oppslaget for søket sammen med id .

2. Deretter oppretter vi en funksjon som vil fokusere på søkeinngangen.

 funksjonssøk () {var search = $ ('# search'); search.val ( ''); search.focus (); } 

3. Til slutt binder vi en nøkkel til å kjøre funksjonen.

 Mousetrap.bind ('/', søk); 

4. det er det Du bør nå kunne navigere til søkeinngangen ved å trykke på / -knappen.

Alternativt kan du også binde tastekombinasjonen, Ctrl / Cmd + F, som er en populær nøkkel snarvei som brukes til søk i mange stasjonære apper:

 Mousetrap.bind (['kommando + f', 'ctrl + f'], søk); 

Bruke Mousetrap med Bootstrap

Det er enkelt å integrere Mousetrap med et rammeverk, for eksempel Bootstrap. I dette andre eksempelet vil vi vise et hjelpevindu som viser en liste over snarveier som er tilgjengelige på nettstedet. Her velger jeg Bootstrap Modal å presentere listen, og betegne? nøkkel for å vise modal.

Selv om ? er bare tilgjengelig med Shift-tasten, bare bindende? nøkkelen er tilstrekkelig.

 Mousetrap.bind ('?', Funksjon () {$ ('# help'). Modal ('show');}); 

Nå når du treffer? nøkkel, vil en popup vises.

Tips for effektiv binding

Over tid kan din voksende samling av hurtigtastene begynne å ødelegge koden din. Hvis dette skjer, er det en utvidelse du kan legge til for å gjøre dine "nøkkelbindende" koder mer effektive. Det er kalt "bindelogg". Legg til denne utvidelsen etter det primære Mousetrap-biblioteket, mousetrap.min.js .

Nå, i stedet for å skille mellom hver nøkkelbinding, kan vi enkelt gruppere dem i en enkelt .bind() metode, slik som:

 Mousetrap.bind ({'/': søk, 't': tweet, '?': Funksjon modal () {$ ('# help'). Modal ('show');}, 'j': funksjon neste ) {highLight ('j')}, 'k': funksjon prev () {highLight ('k')}}); 

For mer avansert implementering kan du se demoen jeg har laget. I demoen kan du trykke på J eller K for å markere innlegget, og trykk T for å tweet det nåværende innlegget du har markert.

  • Se demo
  • nedlasting

5 nye og uvanlige måter å tjene ekstra penger

5 nye og uvanlige måter å tjene ekstra penger

De fleste vil gjerne ha mulighet til å tjene ekstra penger. Som det står, har en hel del 63% av amerikanerne ikke nok besparelser til å betale for en $ 500 nødsituasjon uten å gripe til bevisste kostnadsbesparende tiltak eller låne penger - fra venner og familie hvis de er heldige, fra kredittkort eller lønningslån hvis de er ikke.For å v

(Tekniske og design tips)

3 ting du ikke vet om JavaScript-arrays

3 ting du ikke vet om JavaScript-arrays

Arrays er en mye brukt funksjon i programmeringsspråk; De er spesielle variabler som kan brukes til å lagre flere verdier på samme tid. Men når det gjelder JavaScript, så enkelt som det er å lære, er det alltid mer å utforske.I dette innlegget ser vi på tre mindre kjente, men viktige funksjoner i JavaScript-arrays du kanskje ikke har kjent før.1. Legg t

(Tekniske og design tips)