Bei der Erstellung dynamischer responsiver Websites muss der Entwickler auch mobile Gesten wie Kneifen, Tippen und Wischen beherrschen. Diese Gesten werden von mobilen Entwicklungssprachen wie „ flattern ' oder ' reagiere nativ ” und JavaScript. Andere Webprogramme verarbeiten diese Art von Ereignissen nicht. Glücklicherweise! Mit Hilfe von jQuerys „ Touch-Ereignis Mit dem Plugin „Plugin“ können diese Ereignisse bzw. Gesten ebenfalls verarbeitet werden.
In diesem Blog wird der Prozess zur Verwendung des jQuery-Touch-Event-Plugins für Mobiltelefone veranschaulicht.
Wie verwende ich das jQuery Touch Events Plugin für Mobiltelefone?
jQuery abstrahiert die Unterschiede zwischen Touch-Events und mobilen Events, um konsistente APIs oder Plugins wie „ Touch-Ereignis “. Dieses Plugin stellt mehrere Ereignisse bereit, die unten in tabellarischer Form aufgeführt sind:
| Ente schlagen | Ruft am Ende des Wischens über ein Element eine bestimmte Funktion auf. |
| scrollstart | Ruft eine bestimmte Funktion zu Beginn des Bildlaufs für das ausgewählte Element auf. |
| Scrollende | Ruft am Ende des Bildlaufs für das Element eine bestimmte Funktion auf. |
| Orientierungsänderung | Löst eine Funktion aus, wenn die Ausrichtung des Geräts oder Mobiltelefons geändert wird, z. B. beim Verschieben im Hochformat vom Querformat. |
Syntax
Die Syntax für jQuery-Touch-Ereignisse ist unten angegeben:
$ ( 'Das' ) .touchEvent ( Funktion ( ) {
// dein Code
} )
In der obigen Syntax:
-
- Der ' Das „ist der Selektor, der eine Aktion als Aktionsaufrufer oder ausgewähltes Element darstellt.
- Der ' touchEvent „ist der spezifische Ereignisname, der verwendet wird, es kann ein Ereignis aus der oben genannten Tabelle sein.
- Der ' func() „ist die benutzerdefinierte Funktion, die vom bereitgestellten Touch-Ereignis ausgeführt wird.
Schauen wir uns nun einige Beispiele an, um Touch-Ereignisse besser zu verstehen.
Beispiel 1: Verwendung von Tap und DoubleTap
In diesem Beispiel ist das „ touchEvent ' Ereignis ' klopfen ' Und ' Doppeltippen „wird verwendet, um eine Funktion für ein ausgewähltes Element aufzurufen oder auszuführen:
< html >< Kopf >
< Skript src = „https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js“ > Skript >
< Skript src = „https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js“ >
Skript >
Kopf >
< Körper >
< h3 Stil = „Farbe: Kadettenblau;“ > Linux h3 >
< Taste Ausweis = 'T' > Klopfen Taste >
< Taste Ausweis = „dt“ > Doppeltippen Taste >
< P Ausweis = 'Ziel' > Das Beispiel für DoubleTap- und Tap-Touch-Ereignisse. P >
< Skript >
$ ( '#T' ) .klopfen ( Funktion ( ) {
$ ( '#Ziel' ) .verstecken ( ) ;
} )
$ ( '#dt' ) .doubletap ( Funktion ( ) {
$ ( '#Ziel' ) .zeigen ( ) ;
} )
Skript >
Körper >
html >
Die Erklärung des obigen Codes:
-
- Erstens, das CDN „ Content-Delivery-Netzwerk ” für jQuery- und Touch-Ereignisse wird in das „
”-Tag, um sie zugänglich zu machen. Die CDNs finden Sie auf der offiziellen Seite von jQuery und über den Besuch der cdnjs jeweils. - Als nächstes werden zwei Schaltflächenelemente mit der ID „ erstellt. T ' Und ' dt “. Erstellen Sie außerdem ein „ P ” Element mit der ID „ Ziel “. Die Aktion des Berührungsereignisses wird für dieses Element ausgeführt.
- Innerhalb der „
”-Tag, wählen Sie das Element mit der ID „ T ” und fügen Sie das „ klopfen ” Berühren Sie das Ereignis damit. Dieses Ereignis wählt ein anderes HTML-Element mit der ID „ Ziel “ und wendet die „ verstecken() ”-Methode drauf. - Wählen Sie außerdem „ dt ”-Element und wenden Sie das „ Doppeltippen ” Berühren Sie das Ereignis und wenden Sie auf die gleiche Weise das „ zeigen() ” Methode auf der „ Ziel ”id-Element.
- Erstens, das CDN „ Content-Delivery-Netzwerk ” für jQuery- und Touch-Ereignisse wird in das „
Die nach der Kompilierung des Codes generierte Ausgabe wird unten angezeigt:
Die obige Ausgabe zeigt, dass die Aktionen bei Berührungsereignissen „Tippen“ und „Doppeltippen“ ausgeführt wurden.
Beispiel 2: Verwendung von Swipe- und Swipeend-Touch-Events
In diesem Beispiel ist die Implementierung des „ wischen ' Und ' Ente schlagen „Touch-Events werden demonstriert:
< Skript >$ ( '#T' ) .wischen ( Funktion ( ) {
$ ( '#Ziel' ) .verstecken ( ) ;
} )
$ ( '#T' ) .Swiping-Ente ( Funktion ( ) {
$ ( '#Ziel' ) .verstecken ( ) ;
} )
Skript >
Die Beschreibung des obigen jQuery-Codes lautet wie folgt:
-
- Zunächst wird das ausgewählte Element über seine ID ausgewählt. T ' und das ' wischen ”-Ereignis ist damit verbunden. Dieses Ereignis löst eine Funktion aus und die ausgelöste Funktion wählt das Zielelement über die ID „ aus. Ziel “ und wendet die „ verstecken() ”-Methode darauf, um seinen Inhalt unsichtbar zu machen.
- Als nächstes wird das „ Ente schlagen Das Ereignis wird auf dasselbe Element angewendet und seine Funktion wird auf das „Ereignis“ angewendet. zeigen() ”-Methode über das ausgewählte Element mit der ID „ Ziel ”, um den Inhalt sichtbar zu machen, wenn das Wischereignis endet.
Die Ausgabe für den obigen Code wird wie folgt generiert:
Die Ausgabe zeigt, dass der Inhalt des Zielelements zum Zeitpunkt des Wischens ausgeblendet wird und angezeigt wird, wenn das Wischereignis beendet wird.
Beispiel 3: Verwendung der Scrollstart- und Scrollend-Touch-Events
In diesem Fall ist das „ scrollstart ' Und ' Scrollende „Touch-Events werden implementiert:
< Skript >$ ( '#T' ) .scrollstart ( Funktion ( ) {
$ ( '#Ziel' ) .verstecken ( ) ;
} )
$ ( '#T' ) .scrollend ( Funktion ( ) {
$ ( '#Ziel' ) .zeigen ( ) ;
} )
Skript >
Die Erklärung für den obigen Code lautet wie folgt:
-
- Die einzige Änderung in diesem Beispiel ist die Verwendung von „ scrollstart ' Und ' Scrollende „Veranstaltungen zum Durchführen“ verstecken() ' Und ' zeigen() ”-Methoden über ein Element und der Rest des Codes bleibt derselbe wie im obigen Beispiel.
- Der Zieltext wird zu Beginn oder während des Scrollens ausgeblendet und am Ende des Scrollens sichtbar.
Die nach der Kompilierung des obigen Codes generierte Ausgabe ist unten dargestellt:
Die Ausgabe zeigt, dass der Elementinhalt zum Zeitpunkt des Scrollens ausgeblendet ist und sichtbar wird, wenn der Scrollvorgang beendet wird.
In diesem Blog wurden die jQuery-Touch-Event-Plugins für mobile Geräte erläutert.
Abschluss
Die jQuery „ Touch-Ereignis „Plugin für Mobilgeräte, ermöglicht jQuery das Hinzufügen von Ereignissen, die speziell die auf Touch-Handys auftretenden Ereignisse wie Wischen, Tippen, Orientierungsänderung usw. verarbeiten. Die von diesem Plugin bereitgestellten Ereignisse werden genau wie herkömmliche „ onclick ” oder andere Veranstaltungen. Mithilfe dieses Plugins kann der Entwickler ganz einfach bestimmte Funktionen entsprechend der Benutzerinteraktion mit dem Mobiltelefon anwenden. In diesem Blog wurde das Plugging von jQuery-Touch-Ereignissen für Mobilgeräte erläutert.