Hoe u sneltoetsen naar uw website toevoegt

Hou van de sneltoetsen? Ze kunnen u veel tijd besparen, toch? Wilt u sneltoetsen toevoegen aan uw eigen website, ten behoeve van uw bezoekers? Het zou de toegankelijkheid en navigatie van uw site aanzienlijk verbeteren.

sneltoetsen toevoegen aan website

In dit bericht geef ik een korte handleiding over het toevoegen van snelkoppelingen naar uw webpagina met behulp van een JavaScript-bibliotheek met de naam Muizeval. Met Mousetrap kan dat aanduiden van sleutels zoals Shift, Ctrl, Alt, Opties en Command to bepaalde functies uitvoeren op uw website. Het werkt ook goed in oudere browsers.

Ermee beginnen

Begin met het maken van een nieuw HTML-document samen met de inhoud en het koppelen van de Mousetrap-bibliotheek. Ik zal de Muizenval-bibliotheek gebruiken gehost in CDNJs, zodat de bibliotheek wordt bediend via het CloudFlare-netwerk, dat sneller zou moeten zijn dan onze eigen server

<script src = "// cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"> </ script>

Nu zullen we de muizenval gebruiken 'binden' methode om toetsenbordtoetsen met functie te bevestigen. U mag toewijzen een enkele toets, een toetscombinatie of reekstoetsenBijvoorbeeld

Enkele sleutel

In dit voorbeeld binden we de s.

Mousetrap.bind ('s', functie (e) {// uw functie hier ...});

Combinatiesleutel

In dit voorbeeld binden we de Ctrl en s. U moet de twee toetsen samen indrukken om de aangegeven functie uit te voeren.

Mousetrap.bind ('ctrl + s', functie (e) {// uw functie hier ...});

Volgorde sleutel

In dit voorbeeld moet de gebruiker op drukken g en s hierop volgend. Als u een op het web gebaseerd spel ontwikkelt, kan dit handig zijn voor het toevoegen van een verborgen geheime sleutelcombo.

Mousetrap.bind ('g s', functie (e) {// uw functie hier ...});

Mousetrap gebruiken

We zullen een eenvoudige webpagina bouwen met een aantal sneltoetsen waarmee gebruikers toegang hebben tot bepaalde functies op de website. We zullen jQuery gebruiken om het gemakkelijker te maken om het HTML-document te manipuleren en HTML-elementen te selecteren.

<script src = "// cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </ script> <script src = "// cdnjs.cloudflare.com/ajax/libs/mousetrap /1.4.6/mousetrap.min.js "> </ script>

Laten we beginnen met iets eenvoudigs.

We gaan een sleutel binden waarmee de gebruiker snel kan focussen op het zoekveld.

1. Het volgende is de HTML-opmaak voor de zoekopdracht samen met de id.

<input type = "text" id = "search" class = "form-control" placeholder = "Zoeken naar ...">

2. Vervolgens maken we een functie die zich richt op de zoekinvoer.

functie zoeken () {var search = $ ('# search'); search.val ( ''); search.focus (); }

3. Ten slotte binden we een sleutel om de functie uit te voeren.

Mousetrap.bind ('/', zoeken);

4. Dat is het. U zou nu naar de zoekingang kunnen navigeren door op te drukken / knop.

Als alternatief kunt u ook de toetsencombinatie binden, Ctrl / Cmd + F, wat een populaire sneltoets is die wordt gebruikt voor zoeken in veel desktop-apps:

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

Mousetrap gebruiken met Bootstrap

Het is gemakkelijk om de muizenval te integreren met een raamwerk, bijvoorbeeld Bootstrap. In dit tweede voorbeeld zullen we een helpvenster tonen met een lijst met snelkoppelingen die beschikbaar zijn op de website. Hier kies ik voor de Bootstrap Modal om de lijst te presenteren en de ? toets om het modale te tonen.

Hoewel de ? is alleen toegankelijk met de verschuiving sleutel, alleen binden de ? sleutel is voldoende.

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

Nu wanneer je de ? toets, verschijnt er een pop-up.

Tip voor efficiënte binding

Na verloop van tijd kan je groeiende verzameling sneltoetsen je code gaan verknoeien. Als dit gebeurt, is er een extensie die u kunt toevoegen om uw "sleutelbindende" codes efficiënter te maken. Het wordt het "bind woordenboek" genoemd. Voeg deze extensie toe na de primaire Mousetrap-bibliotheek, mousetrap.min.js.

In plaats van elke sleutelbinding te scheiden, kunnen we ze nu netjes groeperen in een enkele .binden() methode, zoals zo:

Mousetrap.bind ({'/': zoeken, 't': tweet, '?': Function modal () {$ ('# help'). Modal ('show');}, 'j': function next ( ) {highLight ('j')}, 'k': function vorige () {highLight ('k')}});	

Verwant bericht

Laat een reactie achter

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.