गतिशील उत्तरदायी वेबसाइटों के निर्माण में, डेवलपर को पिंचिंग, टैपिंग और स्वाइपिंग जैसे मोबाइल इशारों को भी संभालने की आवश्यकता होती है। इन इशारों को मोबाइल विकास भाषाओं द्वारा नियंत्रित किया जाता है जैसे ' स्पंदन ' या ' देशी प्रतिक्रिया करें ” और जावास्क्रिप्ट। अन्य वेब प्रोग्रामिंग इस प्रकार की घटना को संभाल नहीं पाती है। किस्मत से! jQuery की मदद से ' स्पर्श घटना प्लगइन, इन घटनाओं या इशारों को भी नियंत्रित किया जा सकता है।
यह ब्लॉग मोबाइल के लिए jQuery टच इवेंट प्लगइन का उपयोग करने की प्रक्रिया का वर्णन करेगा।
मोबाइल के लिए jQuery टच इवेंट प्लगइन का उपयोग कैसे करें?
jQuery लगातार एपीआई या प्लगइन्स का उपयोग करने के लिए टच इवेंट और मोबाइल इवेंट के बीच अंतर को सारांशित करता है जैसे ' स्पर्श घटना ”। इस प्लगइन द्वारा कई इवेंट उपलब्ध कराए गए हैं जो नीचे सारणीबद्ध रूप में बताए गए हैं:
| चाबुक मारने वाली बत्तख | किसी तत्व पर स्वाइप के अंत में एक विशिष्ट फ़ंक्शन को आमंत्रित करता है। |
| स्क्रॉलस्टार्ट | चयनित तत्व पर स्क्रॉलिंग की शुरुआत में एक विशिष्ट फ़ंक्शन को आमंत्रित करता है। |
| स्क्रॉलएंड | तत्व पर स्क्रॉलिंग के अंत में एक विशिष्ट फ़ंक्शन को आमंत्रित करता है। |
| अभिविन्यासपरिवर्तन | जब डिवाइस या मोबाइल का ओरिएंटेशन बदल जाता है, जैसे लैंडस्केप लेआउट से पोर्ट्रेट में जाना, तो एक फ़ंक्शन सक्रिय हो जाता है। |
वाक्य - विन्यास
JQuery टच इवेंट के लिए सिंटैक्स नीचे दिया गया है:
$ ( 'यह' ) .touchEvent ( समारोह ( ) {
// तुम्हारा कोड
} )
उपरोक्त वाक्यविन्यास में:
-
- “ यह ' चयनकर्ता है जो एक्शन कॉलर या चयनित तत्व के रूप में एक क्रिया है।
- “ स्पर्शघटना ' विशिष्ट ईवेंट नाम है जिसका उपयोग किया जा रहा है, यह ऊपर बताई गई तालिका से ईवेंट कर सकता है।
- “ func() ' एक कस्टम फ़ंक्शन है जिसे दिए गए टच इवेंट द्वारा निष्पादित किया जाएगा।
अब, आइए स्पर्श घटनाओं की बेहतर समझ के लिए कुछ उदाहरण देखें।
उदाहरण 1: टैप और डबलटैप का उपयोग
इस उदाहरण में, ' स्पर्शघटना ' आयोजन ' नल ' और ' दो बार टैप ' का उपयोग किसी चयनित तत्व पर कुछ कार्य करने या निष्पादित करने के लिए किया जाएगा:
< एचटीएमएल >< सिर >
< स्क्रिप्ट स्रोत = '169एफए1एफई82768018एफएए3एफ4बीई75एएफ6ई3ईसीसी6एफई9एई' > लिखी हुई कहानी >
< लिखी हुई कहानी स्रोत = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.3/jquery.mobile-events.min.js' >
लिखी हुई कहानी >
सिर >
< शरीर >
< h3 शैली = 'रंग: कैडेटब्लू;' > लिनक्स h3 >
< बटन पहचान = 'टी' > नल बटन >
< बटन पहचान = 'डीटी' > दो बार टैप बटन >
< पी पहचान = 'लक्ष्य' > डबलटैप और टैप टच इवेंट उदाहरण। पी >
< लिखी हुई कहानी >
$ ( '#टी' ) ।नल ( समारोह ( ) {
$ ( '#लक्ष्य' ) ।छिपाना ( ) ;
} )
$ ( '#dt' ) ।दो बार टैप ( समारोह ( ) {
$ ( '#लक्ष्य' ) ।दिखाओ ( ) ;
} )
लिखी हुई कहानी >
शरीर >
एचटीएमएल >
उपरोक्त कोड की व्याख्या:
-
- सबसे पहले, सीडीएन ' सामग्री वितरण प्रसार 'jQuery और टच इवेंट के लिए' के अंदर डाला जा रहा है <सिर> उन्हें सुलभ बनाने के लिए टैग करें। सीडीएन आधिकारिक वेबसाइट पर पाए जा सकते हैं jQuery के और cdnjs पर जाकर क्रमश।
- इसके बाद, दो बटन तत्व 'की आईडी के साथ बनाए जाते हैं टी ' और ' डीटी ”। इसके अलावा, एक ' बनाएं पी 'की आईडी वाला तत्व' लक्ष्य ”। इस तत्व पर स्पर्श इवेंट द्वारा कार्रवाई की जाएगी।
- के अंदर ' <स्क्रिप्ट> ' टैग, ' की आईडी वाले तत्व का चयन करें टी ' और संलग्न करें ' नल इसके साथ घटना को स्पर्श करें। यह ईवेंट 'की आईडी के साथ एक और HTML तत्व का चयन करता है लक्ष्य 'और' लागू होता है छिपाना() इस पर विधि.
- इसके अलावा, ' का चयन करें डीटी 'तत्व और लागू करें' दो बार टैप 'घटना को स्पर्श करें और उसी प्रकार लागू करें' दिखाओ() 'पर विधि' लक्ष्य 'आईडी तत्व.
कोड के संकलन के बाद उत्पन्न आउटपुट नीचे दिखाया गया है:
उपरोक्त आउटपुट से पता चलता है कि क्रियाएँ 'टैप' और 'डबलटैप' स्पर्श घटनाओं पर की गई हैं।
उदाहरण 2: स्वाइप और स्वाइपएंड टच इवेंट का उपयोग
इस उदाहरण में, 'का कार्यान्वयन कड़ी चोट ' और ' चाबुक मारने वाली बत्तख 'स्पर्श घटनाओं का प्रदर्शन किया जा रहा है:
< लिखी हुई कहानी >$ ( '#टी' ) .स्वाइप ( समारोह ( ) {
$ ( '#लक्ष्य' ) ।छिपाना ( ) ;
} )
$ ( '#टी' ) .स्वाइपिंग बत्तख ( समारोह ( ) {
$ ( '#लक्ष्य' ) ।छिपाना ( ) ;
} )
लिखी हुई कहानी >
उपरोक्त jQuery कोड का विवरण इस प्रकार है:
-
- सबसे पहले, चुने गए तत्व को उसकी आईडी के माध्यम से चुना जाता है ” टी ' और यह ' कड़ी चोट घटना इसके साथ जुड़ी हुई है। यह ईवेंट एक फ़ंक्शन को सक्रिय करता है और सक्रिय फ़ंक्शन आईडी के माध्यम से लक्षित तत्व का चयन करता है। लक्ष्य 'और' लागू होता है छिपाना() इसकी सामग्री को अदृश्य बनाने के लिए इस पर विधि।
- अगला, ' चाबुक मारने वाली बत्तख 'घटना को उसी तत्व पर लागू किया जाता है और उसके कार्य को लागू किया जाता है' दिखाओ() 'की आईडी के साथ चयनित तत्व पर विधि' लक्ष्य स्वाइप इवेंट समाप्त होने पर सामग्री को दृश्यमान बनाने के लिए।
उपरोक्त कोड के लिए आउटपुट इस प्रकार उत्पन्न होता है:
आउटपुट से पता चलता है कि लक्षित तत्व सामग्री स्वाइप के समय छिप जाती है और स्वाइप इवेंट समाप्त होने पर दिखाई देती है।
उदाहरण 3: स्क्रॉलस्टार्ट और स्क्रॉलएंड टच इवेंट का उपयोग
इस मामले में, ' स्क्रॉलस्टार्ट ' और ' स्क्रॉलएंड 'स्पर्श घटनाएँ लागू होने जा रही हैं:
< लिखी हुई कहानी >$ ( '#टी' ) .स्क्रॉलस्टार्ट ( समारोह ( ) {
$ ( '#लक्ष्य' ) ।छिपाना ( ) ;
} )
$ ( '#टी' ) .स्क्रॉलेंड ( समारोह ( ) {
$ ( '#लक्ष्य' ) ।दिखाओ ( ) ;
} )
लिखी हुई कहानी >
उपरोक्त कोड की व्याख्या इस प्रकार है:
-
- इस उदाहरण में एकमात्र परिवर्तन ' का उपयोग है स्क्रॉलस्टार्ट ' और ' स्क्रॉलएंड 'प्रदर्शन करने योग्य कार्यक्रम' छिपाना() ' और ' दिखाओ() 'एक तत्व और बाकी कोड पर विधियां उपरोक्त उदाहरण के समान ही रहेंगी।
- लक्षित पाठ प्रारंभ में या स्क्रॉलिंग के दौरान छिप जाता है और स्क्रॉलिंग समाप्त होने पर यह दृश्यमान हो जाता है।
उपरोक्त कोड के संकलन के बाद उत्पन्न आउटपुट नीचे दिखाया गया है:
आउटपुट से पता चलता है कि स्क्रॉलिंग के समय तत्व सामग्री छिपी हुई है और स्क्रॉलिंग समाप्त होने पर यह दिखाई देती है।
इस ब्लॉग में मोबाइल उपकरणों के लिए jQuery टच इवेंट प्लगइन्स के बारे में बताया गया है।
निष्कर्ष
jQuery ' स्पर्श घटना मोबाइल के लिए प्लगइन, jQuery को उन घटनाओं को जोड़ने की अनुमति देता है जो विशेष रूप से टच मोबाइल पर होने वाली घटनाओं जैसे स्वाइपिंग, टैपिंग, ओरिएंटेशन चेंज आदि को संभालती हैं। इस प्लगइन द्वारा प्रदान की गई घटनाएं पारंपरिक की तरह ही लागू की जाती हैं। क्लिक पर ”या अन्य घटनाएँ। इस प्लगइन का उपयोग करके, डेवलपर मोबाइल के साथ उपयोगकर्ता के इंटरैक्शन के अनुसार कुछ फ़ंक्शन आसानी से लागू कर सकता है। इस ब्लॉग में मोबाइल के लिए jQuery टच इवेंट प्लगिंग के बारे में बताया गया है।