🍁 😥 🍵 इंटरनेट एक्सप्लोरर और अन्य ब्राउज़रों में स्वाइप जेस्चर 🖕🏻 💻 🤞

Microsoft अपने इंटरनेट एक्सप्लोरर ब्राउज़र में लगातार सुधार करने, अपने प्रमुख वेब मानकों का विस्तार करने और आधुनिक सुविधाओं को जोड़ने के लिए प्रतिबद्ध है। संस्करण IE10 के साथ शुरू, इशारे दिखाई दिए हैं। सबसे अधिक संभावना है कि आप पहले से ही आईओएस या एंड्रॉइड के लिए ब्राउज़रों में स्पर्श नेविगेशन से परिचित हैं, क्योंकि अधिक से अधिक डिवाइस हैं जो स्पर्श घटनाओं का समर्थन करते हैं। अब न केवल स्मार्टफोन और टैबलेट में यह सुविधा है, बल्कि डेस्कटॉप कंप्यूटर भी हैं।

एक अनुकूली वेबसाइट बनाते समय जिसमें बैनर, गैलरी, या कोई रोटेशन ब्लॉक होता है, यह क्लाइंट को समर्थन देने के लिए एक अच्छा रूप है जो न केवल पिछड़े तीर के साथ, बल्कि इशारों के साथ सही जगह पर स्क्रॉल करने की क्षमता रखता है, अगर उपयोगकर्ता की डिवाइस इसे अनुमति देता है।

यह लेख jquery प्लगइन के बारे में बात करता है, जो आपको इसके लिए Microsoft के कस्टम विज़न के साथ परिचित touchstart

और touchstart

को संयोजित करने की अनुमति देता है।

प्लगइन, जिस पर बाद में चर्चा की जाएगी, "बैक" और "फॉरवर्ड" स्वाइप-जेस्चर को समझता है और इसे कई तुलनात्मक ब्लॉकों के रूप में प्रस्तुत किया जाएगा जहां से कोड की मुख्य क्रिया दिखाई देगी। आप इसे इसकी संपूर्णता में डाउनलोड कर सकते हैं और देख सकते हैं कि यह कैसे काम करता है। नीचे लिंक करें।

आरंभ करने के लिए, इंटरनेट एक्सप्लोरर को काम करने के लिए, आपको दो काम करने होंगे:

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

 #swipe { -ms-touch-action: none; }

पहला बिंदु है X-UA-Compatible

मेटा टैग IE8 + ब्राउज़र में पृष्ठों के डिस्प्ले मोड को नियंत्रित करता है।

दूसरा बिंदु - संवेदी इंटरैक्शन के मानक प्रसंस्करण को पूरी तरह से अक्षम करता है और सभी पॉइंटर घटनाओं को जावास्क्रिप्ट कोड पर रीडायरेक्ट करता है।

यह समझने के लिए कि हम एक IE ब्राउज़र के साथ एक डिवाइस पर काम कर रहे हैं जो स्पर्श इशारों को समझता है, हम एक चर सेट करते हैं जिसे हम परिस्थितियों में उपयोग करेंगे।

 var IE = window.navigator.msPointerEnabled;

और, वास्तव में, घटना की चुनौती क्या दिखती है।

 var touchElem = document.getElementById('swipe'); if (IE && window.MSGesture) { //events for IE var eventStart = "MSGestureStart", eventMove = "MSGestureChange"; var msGesture = new MSGesture(); msGesture.target = touchElem; touchElem.addEventListener('MSPointerDown', function(event) { msGesture.addPointer(event.pointerId); }); } else { //events for other browsers var eventStart = "touchstart", eventMove = "touchmove"; } touchElem.addEventListener(eventStart, function (e) { swipe.init(e, eventMove); }, false);

इसके अलावा, गैर-IE के लिए swipe.init

मेथड में, हम टच इवेंट के स्टार्ट कोऑर्डिनेट्स को याद करते हैं, और फिर सभी ब्राउजर्स के साथ हम swipe.onTouchMove

करते हैं।

 if(!IE) { if (e.pageX || e.targetTouches[0].pageX) { swipe.variable.startX = e.pageX || e.targetTouches[0].pageX; } } touchElem.addEventListener(eventMove, swipe.onTouchMove, false);

swipe.onTouchMove

अंदर, ब्राउज़र swipe.onTouchMove

भी होता है।

 if(IE) { if (e.detail == e.MSGESTURE_FLAG_INERTIA) return; swipe.variable.translationX += e.translationX; } else { var newX = e.pageX || e.targetTouches[0].pageX; swipe.variable.translationX = newX - swipe.variable.startX; } if (Math.abs(swipe.variable.translationX) > 10) { swipe.switchDirection(); }

इस मामले में, संख्या 10

पीएक्स में ऑफसेट है जो स्क्रीन पर इशारे के समय हुई थी। इसे मनमाने ढंग से सेट किया जा सकता है। स्पर्श करने की प्रतिक्रिया की संवेदनशीलता इसके मूल्य पर निर्भर करेगी।

इसके अलावा, switchDirection

फ़ंक्शन में, इशारे की दिशा निर्धारित की जाती है, यदि swipe.variable.translationX

मान सकारात्मक है, तो swiperight

इवेंट को swiperight

गया swiperight

, और यदि यह नकारात्मक है, तो swipeleft

।

यह स्पष्ट हो जाने के बाद कि उपयोगकर्ता अपने कार्यों से उम्मीद करता है, संबंधित कार्य किया जाता है, वही जो कि सरल तीर "बैक" या "फॉरवर्ड" पर क्लिक करते समय काम करेगा।

जेस्चरवॉइप प्लगइन को निम्न प्रकार से कहा जाता है।

 $('#swipe').gestureSwipe('event', eventHandler);

जहां event

swipeleft

या swiperight

हो सकती है

Microsoft आधिकारिक दस्तावेज ।

एक पूर्ण काम करने का उदाहरण यहां पाया जा सकता है ।

इंटरनेट एक्सप्लोरर और अन्य ब्राउज़रों में स्वाइप जेस्चर

More articles: