متحرک ریسپانسیو ویب سائٹس کی تخلیق میں، ڈویلپر کو موبائل اشاروں کے ساتھ ساتھ پنچنگ، ٹیپنگ اور سوائپنگ کو بھی سنبھالنے کی ضرورت ہوتی ہے۔ ان اشاروں کو موبائل ڈیولپمنٹ لینگویج کے ذریعہ سنبھالا جاتا ہے جیسے ' لہرانا 'یا' مقامی ردعمل 'اور جاوا اسکرپٹ۔ دیگر ویب پروگرامنگ اس قسم کے ایونٹ کو ہینڈل نہیں کرتی ہے۔ خوش قسمتی سے! jQuery کی مدد سے ' ٹچ ایونٹ ” پلگ ان، ان واقعات یا اشاروں کو بھی سنبھالا جا سکتا ہے۔
یہ بلاگ موبائل کے لیے jQuery ٹچ ایونٹ پلگ ان کو استعمال کرنے کے عمل کی وضاحت کرے گا۔
موبائلز کے لیے jQuery ٹچ ایونٹس پلگ ان کا استعمال کیسے کریں؟
jQuery مسلسل APIs یا پلگ ان استعمال کرنے کے لیے ٹچ ایونٹس اور موبائل ایونٹس کے درمیان فرق کو ختم کرتا ہے جیسے ' ٹچ ایونٹ ' اس پلگ ان کے ذریعہ فراہم کردہ کئی واقعات ہیں جو ٹیبلر شکل میں ذیل میں بیان کیے گئے ہیں:
| کوڑے مارنے والی بطخ | ایک عنصر پر سوائپ کے آخر میں ایک مخصوص فنکشن کو طلب کرتا ہے۔ |
| اسکرول اسٹارٹ | منتخب کردہ عنصر پر سکرولنگ کے آغاز میں ایک مخصوص فنکشن کی درخواست کرتا ہے۔ |
| طومار | عنصر پر سکرولنگ کے اختتام پر ایک مخصوص فنکشن کی درخواست کرتا ہے۔ |
| واقفیت کی تبدیلی | جب آلہ یا موبائل کی واقفیت لینڈ سکیپ لے آؤٹ سے پورٹریٹ میں منتقل ہونے کی طرح بدل جاتی ہے تو فنکشن کو فائر کرتا ہے۔ |
نحو
jQuery ٹچ ایونٹس کا نحو ذیل میں بیان کیا گیا ہے:
$ ( 'یہ' ) .touchEvent ( func ( ) {
// آپ کا کوڈ
} )
مندرجہ بالا نحو میں:
-
- ' یہ ” وہ سلیکٹر ہے جو ایک ایکشن کالر یا منتخب عنصر کے بطور ایک عمل ہے۔
- ' ٹچ ایونٹ ” ایک مخصوص ایونٹ کا نام ہے جو استعمال کیا جا رہا ہے، یہ اوپر بیان کردہ جدول سے واقعہ کر سکتا ہے۔
- ' func() ” وہ کسٹم فنکشن ہے جو فراہم کردہ ٹچ ایونٹ کے ذریعہ انجام دیا جائے گا۔
اب، آئیے ٹچ ایونٹس کی بہتر تفہیم کے لیے چند مثالیں دیکھیں۔
مثال 1: ٹیپ اور ڈبل ٹیپ کا استعمال
اس مثال میں، ' ٹچ ایونٹ ' تقریب ' نل 'اور' ڈبل ٹیپ ” کا استعمال کسی منتخب عنصر پر کچھ کام کرنے یا انجام دینے کے لیے کیا جائے گا:
< 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 انداز = 'رنگ: کیڈٹ بلیو؛' > لینکس h3 >
< بٹن آئی ڈی = 'ٹی' > نل بٹن >
< بٹن آئی ڈی = 'dt' > دو بار تھپتھپائیں۔ بٹن >
< ص آئی ڈی = 'ہدف' > ڈبل ٹیپ اور ٹیپ ٹچ ایونٹس کی مثال۔ ص >
< سکرپٹ >
$ ( '#t' ) .نل ( فنکشن ( ) {
$ ( '#ٹارگٹ' ) .چھپائیں ( ) ;
} )
$ ( '#dt' ) .doubletap ( فنکشن ( ) {
$ ( '#ٹارگٹ' ) دکھائیں ( ) ;
} )
سکرپٹ >
جسم >
html >
مندرجہ بالا کوڈ کی وضاحت:
-
- سب سے پہلے، CDN ' مواد کی ترسیل کا نیٹ ورک 'jQuery اور ٹچ ایونٹس کے لیے' کے اندر داخل کیا جائے گا۔ انہیں قابل رسائی بنانے کے لیے ٹیگ کریں۔ سی ڈی اینز آفیشل پر مل سکتے ہیں۔ jQuery کے اور cdnjs کے ذریعے بالترتیب
- اگلا، دو بٹن عناصر 'کی آئی ڈی کے ساتھ بنائے جاتے ہیں t 'اور' dt ' اس کے علاوہ، ایک ' ص ' کی شناخت کے ساتھ عنصر ' ہدف ' ٹچ ایونٹ کی کارروائی اس عنصر پر کی جائے گی۔
- کے اندر '