গতিশীল প্রতিক্রিয়াশীল ওয়েবসাইট তৈরিতে, বিকাশকারীকে মোবাইল অঙ্গভঙ্গির পাশাপাশি পিঞ্চিং, ট্যাপিং এবং সোয়াইপিং পরিচালনা করতে হবে। এই অঙ্গভঙ্গিগুলি মোবাইল ডেভেলপমেন্ট ল্যাঙ্গুয়েজ দ্বারা পরিচালিত হয় যেমন ' ফ্লাটার 'বা' নেটিভ প্রতিক্রিয়া ” এবং জাভাস্ক্রিপ্ট। অন্যান্য ওয়েব প্রোগ্রামিং এই ধরণের ইভেন্ট পরিচালনা করে না। ভাগ্যক্রমে ! jQuery এর সাহায্যে ' স্পর্শ ঘটনা ” প্লাগইন, এই ঘটনা বা অঙ্গভঙ্গি এছাড়াও পরিচালনা করা যেতে পারে.
এই ব্লগটি মোবাইলের জন্য jQuery টাচ ইভেন্ট প্লাগইন ব্যবহার করার প্রক্রিয়াটি ব্যাখ্যা করবে।
কিভাবে মোবাইলের জন্য jQuery টাচ ইভেন্ট প্লাগইন ব্যবহার করবেন?
jQuery সামঞ্জস্যপূর্ণ API বা প্লাগইন ব্যবহার করার জন্য স্পর্শ ইভেন্ট এবং মোবাইল ইভেন্টের মধ্যে পার্থক্যগুলিকে বিমূর্ত করে ' স্পর্শ ঘটনা ” এই প্লাগইন দ্বারা সরবরাহ করা বেশ কয়েকটি ইভেন্ট রয়েছে যা নীচে সারণী আকারে উল্লেখ করা হয়েছে:
| চাবুক হাঁস | একটি উপাদানের উপর সোয়াইপ শেষে একটি নির্দিষ্ট ফাংশন আহ্বান করে। |
| স্ক্রলস্টার্ট | নির্বাচিত উপাদানে স্ক্রোলিং শুরুতে একটি নির্দিষ্ট ফাংশন আহ্বান করে। |
| স্ক্রলেন্ড | উপাদানে স্ক্রলিং শেষে একটি নির্দিষ্ট ফাংশন আহ্বান করে। |
| অভিযোজন পরিবর্তন | ল্যান্ডস্কেপ লেআউট থেকে প্রতিকৃতিতে সরানোর মতো ডিভাইস বা মোবাইলের অভিযোজন পরিবর্তিত হলে একটি ফাংশন ফায়ার করে। |
বাক্য গঠন
jQuery টাচ ইভেন্টের জন্য সিনট্যাক্স নীচে বর্ণিত হয়েছে:
$ ( 'এই' ) .touch ইভেন্ট ( ফাংশন ( ) {
// তোমার গোপন সংকেত
} )
উপরের সিনট্যাক্সে:
-
- দ্য ' এই ” হল নির্বাচক যা একটি অ্যাকশন কলার বা নির্বাচিত উপাদান হিসাবে একটি ক্রিয়া।
- দ্য ' স্পর্শ ইভেন্ট ” একটি নির্দিষ্ট ইভেন্টের নাম যা ব্যবহার করা হচ্ছে, এটি উপরে বর্ণিত টেবিল থেকে ইভেন্ট করতে পারে।
- দ্য ' 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' > ডবল ট্যাপ বোতাম >
< পি আইডি = 'লক্ষ্য' > ডাবলট্যাপ এবং ট্যাপ টাচ ইভেন্টের উদাহরণ। পি >
< লিপি >
$ ( '#টি' ) .ট্যাপ ( ফাংশন ( ) {
$ ( '#টার্গেট' ) লুকান ( ) ;
} )
$ ( '#ডিটি' ) .ডাবলট্যাপ ( ফাংশন ( ) {
$ ( '#টার্গেট' ) .দেখান ( ) ;
} )
লিপি >
শরীর >
html >
উপরের কোডের ব্যাখ্যা:
-
- প্রথমত, CDN “ তথ্য প্রদান ব্যবস্থা jQuery এবং স্পর্শ ইভেন্টের জন্য 'এর ভিতরে সন্নিবেশ করা হবে <মাথা> তাদের অ্যাক্সেসযোগ্য করতে ট্যাগ করুন। সিডিএন অফিসিয়ালে পাওয়া যাবে jQuery এর এবং cdnjs পরিদর্শনের মাধ্যমে যথাক্রমে
- এর পরে, দুটি বোতাম উপাদান “আইডি দিয়ে তৈরি করা হয় t ' এবং ' dt ” এছাড়াও, একটি তৈরি করুন ' পি ' একটি আইডি সহ উপাদান ' লক্ষ্য ” স্পর্শ ইভেন্ট দ্বারা কর্ম এই উপাদান সঞ্চালিত করা যাচ্ছে.
- ভিতরে '