Κατά τη δημιουργία ιστότοπων με δυναμική απόκριση, ο προγραμματιστής πρέπει να χειρίζεται χειρονομίες για κινητά, όπως το τσίμπημα, το άγγιγμα και το σάρωση. Αυτές οι χειρονομίες αντιμετωπίζονται από γλώσσες ανάπτυξης για κινητά όπως ' ταραχή ' ή ' αντιδρούν εγγενής » και JavaScript. Άλλοι προγραμματισμοί Ιστού δεν χειρίζονται τέτοιου είδους συμβάντα. Ευτυχώς! Με τη βοήθεια του jQuery's ' εκδήλωση αφής ', αυτά τα συμβάντα ή οι χειρονομίες μπορούν επίσης να χειριστούν.
Αυτό το ιστολόγιο θα απεικονίσει τη διαδικασία χρήσης της προσθήκης συμβάντων αφής jQuery για κινητά.
Πώς να χρησιμοποιήσετε την προσθήκη jQuery Touch Events για κινητά;
Το jQuery αφαιρεί τις διαφορές μεταξύ συμβάντων αφής και συμβάντων για κινητά για να χρησιμοποιήσει συνεπή API ή προσθήκες όπως ' εκδήλωση αφής '. Υπάρχουν διάφορα συμβάντα που παρέχονται από αυτό το πρόσθετο, τα οποία αναφέρονται παρακάτω σε μορφή πίνακα:
| μαστιγωτή πάπια | Καλεί μια συγκεκριμένη λειτουργία στο τέλος της ολίσθησης πάνω από ένα στοιχείο. |
| εκκίνηση κύλισης | Καλεί μια συγκεκριμένη λειτουργία στην αρχή της κύλισης στο επιλεγμένο στοιχείο. |
| κύλιση | Καλεί μια συγκεκριμένη λειτουργία στο τέλος της κύλισης στο στοιχείο. |
| αλλαγή προσανατολισμού | Ενεργοποιείται μια λειτουργία όταν ο προσανατολισμός της συσκευής ή του κινητού αλλάζει σαν να μετακινείται σε κατακόρυφο από την οριζόντια διάταξη. |
Σύνταξη
Η σύνταξη για συμβάντα αφής jQuery αναφέρεται παρακάτω:
$ ( 'Αυτό' ) .touchΕκδήλωση ( func ( ) {
// ο κωδικός σου
} )
Στην παραπάνω σύνταξη:
-
- Ο ' Αυτό ” είναι ο επιλογέας που είναι μια ενέργεια ως καλούντος ενέργειας ή επιλεγμένο στοιχείο.
- Ο ' touchEvent ” είναι το συγκεκριμένο όνομα συμβάντος που χρησιμοποιείται, μπορεί να συμβεί από τον παραπάνω πίνακα.
- Ο ' func() ” είναι η προσαρμοσμένη λειτουργία που πρόκειται να εκτελεστεί από το παρεχόμενο συμβάν αφής.
Τώρα, ας επισκεφτούμε μερικά παραδείγματα για καλύτερη κατανόηση των συμβάντων αφής.
Παράδειγμα 1: Χρήση Tap και DoubleTap
Σε αυτό το παράδειγμα, το « touchEvent ' Εκδήλωση ' παρακέντηση ' και ' διπλό χτύπημα ' πρόκειται να χρησιμοποιηθεί για την κλήση ή την εκτέλεση κάποιας λειτουργίας σε ένα επιλεγμένο στοιχείο:
< html >< κεφάλι >
< σενάριο src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js' γραφή >
< γραφή src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
γραφή >
κεφάλι >
< σώμα >
< h3 στυλ = 'χρώμα: μπλε καντ;' > Linux h3 >
< κουμπί ταυτότητα = 'τ' > Παρακέντηση κουμπί >
< κουμπί ταυτότητα = 'dt' > Διπλό χτύπημα κουμπί >
< Π ταυτότητα = 'στόχος' > Το παράδειγμα συμβάντων DoubleTap and Tap Touch. Π >
< γραφή >
$ ( '#t' ) .παρακέντηση ( λειτουργία ( ) {
$ ( '#στόχος' ) .κρύβω ( ) ;
} )
$ ( '#dt' ) .διπλό χτύπημα ( λειτουργία ( ) {
$ ( '#στόχος' ) .προβολή ( ) ;
} )
γραφή >
σώμα >
html >
Η επεξήγηση του παραπάνω κώδικα:
-
- Πρώτον, το CDN ' Δίκτυο παράδοσης περιεχομένου ' για συμβάντα jQuery και touch πρόκειται να εισαχθεί μέσα στο ' <κεφάλι> Κάντε tag για να τα κάνετε προσβάσιμα. Τα CDN μπορούν να βρεθούν στο επίσημο του jQuery και μέσω επίσκεψης στο cdnjs αντίστοιχα.
- Στη συνέχεια, δημιουργούνται δύο στοιχεία κουμπιών με ένα αναγνωριστικό ' t ' και ' dt '. Επίσης, δημιουργήστε ένα ' Π ' στοιχείο με αναγνωριστικό ' στόχος '. Η ενέργεια από το συμβάν αφής θα εκτελεστεί σε αυτό το στοιχείο.
- Μεσα στην ' <σενάριο> ετικέτα ', επιλέξτε το στοιχείο με αναγνωριστικό ' t ' και επισυνάψτε το ' παρακέντηση αγγίξτε το συμβάν με αυτό. Αυτό το συμβάν επιλέγει ένα άλλο στοιχείο html με αναγνωριστικό ' στόχος » και εφαρμόζει το « κρύβω() μέθοδος σε αυτό.
- Επιπλέον, επιλέξτε το « dt στοιχείο ' και εφαρμόστε το ' διπλό χτύπημα ' αγγίξτε συμβάν και με τον ίδιο τρόπο εφαρμόστε το ' προβολή() 'μέθοδος στο ' στόχος ' id στοιχείο.
Η έξοδος που δημιουργείται μετά τη μεταγλώττιση του κώδικα φαίνεται παρακάτω:
Η παραπάνω έξοδος δείχνει ότι οι ενέργειες έχουν εκτελεστεί σε συμβάντα αφής 'tap' και 'doubletap'.
Παράδειγμα 2: Χρήση συμβάντων ολίσθησης και ολίσθησης αφής
Σε αυτό το παράδειγμα, η εφαρμογή του « σουφρώνω ' και ' μαστιγωτή πάπια Θα παρουσιαστούν εκδηλώσεις αφής:
< γραφή >$ ( '#t' ) .σουφρώνω ( λειτουργία ( ) {
$ ( '#στόχος' ) .κρύβω ( ) ;
} )
$ ( '#t' ) .παπί ολίσθησης ( λειτουργία ( ) {
$ ( '#στόχος' ) .κρύβω ( ) ;
} )
γραφή >
Η περιγραφή του παραπάνω κώδικα jQuery είναι η εξής:
-
- Αρχικά, το επιλεγμένο στοιχείο επιλέγεται μέσω του αναγνωριστικού του ' t ' και το ' σουφρώνω ” η εκδήλωση επισυνάπτεται σε αυτό. Αυτό το συμβάν ενεργοποιεί μια συνάρτηση και η ενεργοποιημένη συνάρτηση επιλέγει το στοχευμένο στοιχείο μέσω του αναγνωριστικού ' στόχος » και εφαρμόζει το « κρύβω() ” μέθοδο σε αυτό για να κάνει το περιεχόμενό του αόρατο.
- Στη συνέχεια, το « μαστιγωτή πάπια Το συμβάν εφαρμόζεται στο ίδιο στοιχείο και η λειτουργία του εφαρμόζεται το ' προβολή() μέθοδος ' πάνω από το επιλεγμένο στοιχείο με αναγνωριστικό ' στόχος ” για να κάνετε το περιεχόμενο ορατό όταν τελειώσει το συμβάν ολίσθησης.
Η έξοδος για τον παραπάνω κώδικα δημιουργείται ως εξής:
Η έξοδος δείχνει ότι το περιεχόμενο στοχευμένου στοιχείου αποκρύπτεται τη στιγμή της ολίσθησης και εμφανίζεται όταν τελειώνει το συμβάν ολίσθησης.
Παράδειγμα 3: Χρήση του scrollstart και scrollend Touch Events
Σε αυτή την περίπτωση, το « εκκίνηση κύλισης ' και ' κύλιση Θα υλοποιηθούν εκδηλώσεις αφής:
< γραφή >$ ( '#t' ) .scrollstart ( λειτουργία ( ) {
$ ( '#στόχος' ) .κρύβω ( ) ;
} )
$ ( '#t' ) .κύλιση ( λειτουργία ( ) {
$ ( '#στόχος' ) .προβολή ( ) ;
} )
γραφή >
Η εξήγηση για τον παραπάνω κώδικα δηλώνεται ως εξής:
-
- Η μόνη αλλαγή σε αυτό το παράδειγμα είναι η χρήση του ' εκκίνηση κύλισης ' και ' κύλιση «Εκδηλώσεις για εκτέλεση» κρύβω() ' και ' προβολή() Οι μέθοδοι πάνω από ένα στοιχείο και ο υπόλοιπος κώδικας θα παραμείνει ο ίδιος όπως στο παραπάνω παράδειγμα.
- Το στοχευμένο κείμενο κρύβεται στην αρχή ή κατά την κύλιση και γίνεται ορατό όταν τελειώνει η κύλιση.
Η έξοδος που δημιουργήθηκε μετά τη μεταγλώττιση του παραπάνω κώδικα φαίνεται παρακάτω:
Η έξοδος δείχνει ότι το περιεχόμενο του στοιχείου είναι κρυφό τη στιγμή της κύλισης και γίνεται ορατό όταν τελειώνει η κύλιση.
Αυτό το ιστολόγιο έχει εξηγήσει τις προσθήκες συμβάντων αφής jQuery για κινητές συσκευές.
συμπέρασμα
Το jQuery ' εκδήλωση αφής ' plugin για κινητά, επιτρέπει στο jQuery να προσθέτει συμβάντα που χειρίζονται ειδικά τα συμβάντα που συμβαίνουν σε κινητά αφής, όπως σάρωση, πάτημα, αλλαγή προσανατολισμού κ.λπ. Τα συμβάντα που παρέχονται από αυτήν την προσθήκη υλοποιούνται ακριβώς όπως τα παραδοσιακά ' στο κλικ ” ή άλλες εκδηλώσεις. Χρησιμοποιώντας αυτό το πρόσθετο, ο προγραμματιστής μπορεί εύκολα να εφαρμόσει ορισμένες λειτουργίες ανάλογα με την αλληλεπίδραση του χρήστη με το κινητό. Αυτό το ιστολόγιο έχει εξηγήσει τη σύνδεση συμβάντος αφής jQuery για κινητά.