Bij het maken van dynamisch responsieve websites moet de ontwikkelaar zowel mobiele gebaren als knijpen, tikken en vegen verwerken. Deze gebaren worden afgehandeld door mobiele ontwikkelingstalen zoals “ fladderen ' of ' reageer inheems ” en JavaScript. Andere webprogrammering kan dit soort gebeurtenissen niet aan. Gelukkig! Met behulp van jQuery's “ gebeurtenis aanraken ”-plug-in kunnen deze gebeurtenissen of gebaren ook worden afgehandeld.
Deze blog illustreert het proces om de jQuery touch event-plug-in voor mobiele telefoons te gebruiken.
Hoe gebruik ik de jQuery Touch Events-plug-in voor mobiele telefoons?
jQuery abstraheert de verschillen tussen aanraakgebeurtenissen en mobiele gebeurtenissen om consistente API's of plug-ins zoals ' gebeurtenis aanraken ”. Er zijn verschillende evenementen die door deze plug-in worden aangeboden, die hieronder in tabelvorm worden vermeld:
| opzwepende eend | Roept een specifieke functie op aan het einde van de veegbeweging over een element. |
| scrollstart | Roept een specifieke functie op aan het begin van het scrollen op het geselecteerde element. |
| scrollend | Roept een specifieke functie op aan het einde van het scrollen op het element. |
| oriëntatieverandering | Activeert een functie wanneer de oriëntatie van het apparaat of de mobiele telefoon wordt gewijzigd, zoals het verplaatsen in portret vanuit de liggende lay-out. |
Syntaxis
De syntaxis voor jQuery-aanraakgebeurtenissen wordt hieronder vermeld:
$ ( 'dit' ) .touchEvent ( func ( ) {
// jouw code
} )
In de bovenstaande syntaxis:
-
- De ' dit ” is de selector die een actie is als actieaanroeper of geselecteerd element.
- De ' touchGebeurtenis ” is de specifieke gebeurtenisnaam die wordt gebruikt. Deze kan afkomstig zijn uit de bovenstaande tabel.
- De ' func() ” is de aangepaste functie die wordt uitgevoerd door de opgegeven aanraakgebeurtenis.
Laten we nu een paar voorbeelden bekijken voor een beter begrip van aanraakgebeurtenissen.
Voorbeeld 1: Gebruik van Tap en DoubleTap
In dit voorbeeld is de “ touchGebeurtenis ' evenement ' kraan ' En ' dubbeltikken ” zal worden gebruikt om een functie op een geselecteerd element aan te roepen of uit te voeren:
< html >< hoofd >
< script src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' > script >
< script src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
script >
hoofd >
< lichaam >
< h3 stijl = 'kleur: cadetblauw;' > Linux h3 >
< knop ID kaart = 'T' > Kraan knop >
< knop ID kaart = 'dt' > Dubbeltik knop >
< P ID kaart = 'doel' > Het voorbeeld van DoubleTap en Tap Touch-gebeurtenissen. P >
< script >
$ ( '#T' ) .kraan ( functie ( ) {
$ ( '#doel' ) .verbergen ( ) ;
} )
$ ( '#dt' ) .dubbeltik ( functie ( ) {
$ ( '#doel' ) .show ( ) ;
} )
script >
lichaam >
html >
De uitleg van de bovenstaande code:
-
- Ten eerste het CDN “ Content Delivery Network ' voor jQuery- en aanraakgebeurtenissen wordt ingevoegd in de '
'-tag om ze toegankelijk te maken. De CDN's zijn te vinden op de official van jQuery en via een bezoek aan cdnjs respectievelijk. - Vervolgens worden twee knopelementen gemaakt met de id “ T ' En ' dt ”. Maak ook een “ P ”-element met de id “ doel ”. De actie van de aanraakgebeurtenis wordt op dit element uitgevoerd.
- Binnen in de '
- Ten eerste het CDN “ Content Delivery Network ' voor jQuery- en aanraakgebeurtenissen wordt ingevoegd in de '