عند إنشاء مواقع ويب ديناميكية سريعة الاستجابة، يحتاج المطور إلى التعامل مع إيماءات الهاتف المحمول بالإضافة إلى الضغط والنقر والتمرير. يتم التعامل مع هذه الإيماءات من خلال لغات تطوير الأجهزة المحمولة مثل ' رفرفة ' أو ' رد الفعل الأصلي ' وجافا سكريبت. لا تتعامل برمجة الويب الأخرى مع هذا النوع من الأحداث. لحسن الحظ! بمساعدة jQuery ' حدث اللمس '، ويمكن أيضًا التعامل مع هذه الأحداث أو الإيماءات.
ستوضح هذه المدونة عملية استخدام المكوّن الإضافي لحدث jQuery touch للهواتف المحمولة.
كيفية استخدام البرنامج المساعد jQuery Touch Events للهواتف المحمولة؟
يلخص jQuery الاختلافات بين أحداث اللمس وأحداث الهاتف المحمول لاستخدام واجهات برمجة التطبيقات أو المكونات الإضافية المتسقة مثل ' حدث اللمس '. هناك العديد من الأحداث التي يوفرها هذا البرنامج المساعد والتي تم ذكرها أدناه في النموذج الجدولي:
| بطة الجلد | يستدعي وظيفة محددة في نهاية التمرير فوق عنصر ما. |
| التمرير | يستدعي وظيفة محددة في بداية التمرير على العنصر المحدد. |
| التمرير | يستدعي وظيفة محددة في نهاية التمرير على العنصر. |
| com.orientationchange | يتم تشغيل وظيفة عند تغيير اتجاه الجهاز أو الهاتف المحمول مثل التحرك في الصورة من التخطيط الأفقي. |
بناء الجملة
تم توضيح بناء جملة أحداث اللمس jQuery أدناه:
$ ( 'هذا' ) .touchEvent ( func ( ) {
// الكود الخاص بك
} )
في بناء الجملة أعلاه:
-
- ال ' هذا ' هو المحدد الذي يمثل إجراءً كمستدعي الإجراء أو العنصر المحدد.
- ال ' touchEvent ' هو اسم الحدث المحدد الذي يتم استخدامه، ويمكن أن يحدث من الجدول المذكور أعلاه.
- ال ' وظيفة () ' هي الوظيفة المخصصة التي سيتم تنفيذها بواسطة حدث اللمس المقدم.
الآن، دعنا ننتقل إلى بعض الأمثلة لفهم أحداث اللمس بشكل أفضل.
مثال 1: استخدام Tap وDoubleTap
في هذا المثال ' touchEvent ' حدث ' مقبض ' و ' انقر نقرا مزدوجا ' سيتم استخدامه لاستدعاء أو تنفيذ بعض الوظائف على عنصر محدد:
< لغة البرمجة >< رأس >
< البرنامج النصي 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 >
< زر بطاقة تعريف = 'ر' > مقبض زر >
< زر بطاقة تعريف = 'دت' > انقر نقرًا مزدوجًا زر >
< ص بطاقة تعريف = 'هدف' > مثال على أحداث DoubleTap وTap Touch. ص >
< النصي >
$ ( '#ر' ) .مقبض ( وظيفة ( ) {
$ ( '#هدف' ) .يخفي ( ) ;
} )
$ ( '#dt' ) .النقر المزدوج ( وظيفة ( ) {
$ ( '#هدف' ) .يعرض ( ) ;
} )
النصي >
جسم >
لغة البرمجة >
شرح الكود أعلاه:
-
- أولاً، شبكة CDN “ شبكة توصيل المحتوى 'بالنسبة لأحداث jQuery وtouch سيتم إدراجها داخل' <الرأس> 'علامة لتسهيل الوصول إليها. يمكن العثور على شبكات CDN على الموقع الرسمي من jQuery وعبر زيارة cdnjs على التوالى.
- بعد ذلك، يتم إنشاء عنصري زر بمعرف ' ر ' و ' dt '. كما أنشئ ' ص 'العنصر بمعرف' هدف '. سيتم تنفيذ الإجراء بواسطة حدث اللمس على هذا العنصر.
- داخل ' <النص البرمجي> '، حدد العنصر بمعرف ' ر ' وأرفق ' مقبض 'المس الحدث به. يحدد هذا الحدث عنصر HTML آخر بمعرف ' هدف 'ويطبق' يخفي() 'طريقة عليه.
- علاوة على ذلك، حدد ' dt 'عنصر وتطبيق' انقر نقرا مزدوجا ' المس الحدث وبنفس الطريقة قم بتطبيق ' يعرض() 'طريقة على' هدف 'عنصر الهوية.
يظهر أدناه الإخراج الذي تم إنشاؤه بعد تجميع التعليمات البرمجية:
يوضح الإخراج أعلاه أنه تم تنفيذ الإجراءات على حدثي اللمس 'النقر' و'النقر المزدوج'.
المثال 2: استخدام أحداث اللمس والتمرير السريع
في هذا المثال، تنفيذ ' انتقد ' و ' بطة الجلد سيتم عرض أحداث اللمس:
< النصي >$ ( '#ر' ) .مرر سريعا ( وظيفة ( ) {
$ ( '#هدف' ) .يخفي ( ) ;
} )
$ ( '#ر' ) .الضرب البط ( وظيفة ( ) {
$ ( '#هدف' ) .يخفي ( ) ;
} )
النصي >
وصف كود jQuery أعلاه هو كما يلي:
-
- أولاً، يتم تحديد العنصر المختار عبر المعرف الخاص به ' ر ' و ال ' انتقد 'الحدث مرفق به. يطلق هذا الحدث وظيفة وتحدد الوظيفة التي تم إطلاقها العنصر المستهدف عبر المعرف ' هدف 'ويطبق' يخفي() 'طريقة عليها لجعل محتواها غير مرئي.
- التالي ' بطة الجلد 'يتم تطبيق الحدث على نفس العنصر ويتم تطبيق وظيفته على' يعرض() 'طريقة فوق العنصر المحدد بمعرف' هدف 'لجعل المحتوى مرئيًا عند انتهاء حدث التمرير.
يتم إنشاء إخراج الكود أعلاه على النحو التالي:
يُظهر الإخراج أن محتوى العنصر المستهدف يتم إخفاؤه في وقت السحب ويظهر عند انتهاء حدث السحب.
مثال 3: استخدام أحداث اللمس الخاصة بـscrollstart وscrollend
وفي هذه الحالة ' التمرير ' و ' التمرير ' سيتم تنفيذ أحداث اللمس:
< النصي >$ ( '#ر' ) .scrollstart ( وظيفة ( ) {
$ ( '#هدف' ) .يخفي ( ) ;
} )
$ ( '#ر' ) .التمرير ( وظيفة ( ) {
$ ( '#هدف' ) .يعرض ( ) ;
} )
النصي >
وجاء شرح الكود أعلاه على النحو التالي:
-
- التغيير الوحيد في هذا المثال هو استخدام ' التمرير ' و ' التمرير 'الأحداث لأداء' يخفي() ' و ' يعرض() 'ستظل الأساليب الموجودة على عنصر ما وبقية الكود كما هي في المثال أعلاه.
- يتم إخفاء النص المستهدف في البداية أو أثناء التمرير ويصبح مرئيًا عند انتهاء التمرير.
يظهر أدناه الإخراج الذي تم إنشاؤه بعد تجميع الكود أعلاه:
يُظهر الإخراج أن محتوى العنصر مخفي في وقت التمرير ويصبح مرئيًا عند انتهاء التمرير.
قامت هذه المدونة بشرح المكونات الإضافية لحدث jQuery touch للأجهزة المحمولة.
خاتمة
المسج ' حدث اللمس 'يسمح المكون الإضافي للجوال لـ jQuery بإضافة أحداث تتعامل على وجه التحديد مع الأحداث التي تحدث على الهواتف المحمولة التي تعمل باللمس مثل التمرير والنقر وتغيير الاتجاه وما إلى ذلك. يتم تنفيذ الأحداث التي يوفرها هذا المكون الإضافي تمامًا مثل التقليدية ' عند النقر 'أو غيرها من الأحداث. باستخدام هذا البرنامج المساعد، يمكن للمطور بسهولة تطبيق وظائف معينة وفقا لتفاعل المستخدم مع الهاتف المحمول. لقد أوضحت هذه المدونة توصيل حدث jQuery touch للجوال.