ביצירת אתרים רספונסיביים דינמיים, המפתח צריך להתמודד עם מחוות ניידות כמו גם צביטה, הקשה והחלקה. מחוות אלו מטופלות על ידי שפות פיתוח נייד כמו ' רִפרוּף ' או ' להגיב יליד ' ו-JavaScript. תכנות אינטרנט אחר לא מטפל באירועים מסוג זה. לְמַרְבֶּה הַמַזָל! בעזרת 'של jQuery' אירוע מגע תוסף, ניתן לטפל גם באירועים או מחוות אלו.
בלוג זה ימחיש את התהליך לשימוש בתוסף jQuery touch event עבור ניידים.
כיצד להשתמש בתוסף jQuery Touch Events עבור ניידים?
jQuery מפשט את ההבדלים בין אירועי מגע לאירועים ניידים כדי להשתמש בממשקי API או תוספים עקביים כמו ' אירוע מגע '. ישנם מספר אירועים שסופק על ידי תוסף זה, המפורטים להלן בטופס הטבלה:
| קצפת ברווז | מפעיל פונקציה ספציפית בסוף ההחלקה מעל אלמנט. |
| התחל גלילה | מפעיל פונקציה ספציפית בתחילת הגלילה על האלמנט הנבחר. |
| scrollend | מפעיל פונקציה ספציפית בסוף הגלילה על האלמנט. |
| שינוי כיוון | מפעיל פונקציה כאשר הכיוון של המכשיר או הנייד משתנה כמו תנועה לאורך מהפריסה לרוחב. |
תחביר
התחביר עבור אירועי מגע jQuery מצוין להלן:
$ ( 'זֶה' ) .touchEvent ( func ( ) {
// הקוד שלך
} )
בתחביר לעיל:
-
- ה ' זֶה ” הוא הבורר שהוא פעולה כמתקשר לפעולה או כרכיב נבחר.
- ה ' touchEvent ' הוא שם האירוע הספציפי שנמצא בשימוש, הוא יכול לאירוע מהטבלה שצוינה לעיל.
- ה ' func() ' היא הפונקציה המותאמת אישית שעומדת להתבצע על ידי אירוע המגע שסופק.
כעת, בואו נבקר בכמה דוגמאות להבנה טובה יותר של אירועי מגע.
דוגמה 1: שימוש ב-Tap וב-DoubleTap
בדוגמה זו, ' touchEvent 'אירוע' בֶּרֶז ' ו' הקשה כפולה ' ישמש כדי להפעיל או לבצע פונקציה כלשהי על אלמנט נבחר:
< html >< רֹאשׁ >
< script 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 סִגְנוֹן = 'צבע: כחול צוער;' > לינוקס h3 >
< לַחְצָן תְעוּדַת זֶהוּת = 'ט' > בֶּרֶז לַחְצָן >
< לַחְצָן תְעוּדַת זֶהוּת = 'dt' > הקשה כפולה לַחְצָן >
< ע תְעוּדַת זֶהוּת = 'יַעַד' > דוגמה לאירועי DoubleTap and Tap Touch. ע >
< תַסרִיט >
$ ( '#t' ) .בֶּרֶז ( פוּנקצִיָה ( ) {
$ ( '#יַעַד' ) .להתחבא ( ) ;
} )
$ ( '#dt' ) .הקשה כפולה ( פוּנקצִיָה ( ) {
$ ( '#יַעַד' ) .הופעה ( ) ;
} )
תַסרִיט >
גוּף >
html >
ההסבר של הקוד לעיל:
-
- ראשית, ה-CDN ' רשת להעברת תוכן ' עבור אירועי jQuery ומגע יוכנס בתוך ' ' תג כדי להפוך אותם לנגישים. ניתן למצוא את ה-CDNs ברשמי של jQuery ודרך ביקור ב-cdnjs בהתאמה.
- לאחר מכן, נוצרים שני רכיבי כפתור עם מזהה של ' ט ' ו' dt '. כמו כן, צור ' ע ' רכיב עם מזהה של ' יַעַד '. הפעולה על ידי אירוע המגע הולכת להתבצע על אלמנט זה.
- בתוך ה '