HTML5 टचस्क्रीन इंटरफेस के लिए लाइटबॉक्स बनाना

फ़्लिकर में एक फ्रंट-एंड इंजीनियर स्टीफन वुड्स बताते हैं कि कैसे एक सरल जेस्चर-आधारित लाइटबॉक्स बनाने के लिए और टच इंटरफेस की धारणा और प्रदर्शन को बेहतर बनाने के लिए टिप्स प्रदान करता है।



आवश्यक ज्ञान: इंटरमीडिएट सीएसएस, इंटरमीडिएट एडवांस्ड जावास्क्रिप्ट
आवश्यकताएँ: Android या iOS डिवाइस
समय बिताया: 2-3 घंटे
स्रोत डाउनलोड करें
डेमो देखें


लाइटबॉक्स विगेट्स वेब पर मानक बन गए हैं क्योंकि लाइटबॉक्स का पहला संस्करण 2005 में जारी किया गया था। लाइटबॉक्स बड़ी छवियों को देखने के लिए एक मोडल डायलॉग बॉक्स बनाता है, आमतौर पर स्लाइड के बीच स्थानांतरित करने के लिए अगला और पिछला बटन।

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

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

तुलनात्मक परीक्षणों से पता चलता है कि 1998 के आसपास डेस्कटॉप कंप्यूटरों के प्रदर्शन में सबसे आम स्पर्श डिवाइस तुलनीय हैं। उनके पास आमतौर पर लगभग 256 एमबी रैम, मूल आईमैक के साथ सीपीयू प्रदर्शन होता है। डेस्कटॉप पर "सिर्फ काम" करने के लिए हम जो तरीके अपनाते हैं, वे मोबाइल फोन और टैबलेट पर सही तरीके से काम नहीं करेंगे। सौभाग्य से, इन उपकरणों को आमतौर पर ग्राफिक्स के लिए अच्छी तरह से अनुकूलित किया जाता है, विशेष रूप से स्क्रीन पर वस्तुओं को स्थानांतरित करने के लिए। IOS और Android 3.0+ उपकरणों में हार्डवेयर-त्वरित ग्राफिक्स हैं।
वास्तव में, आप इन उपकरणों को सभ्य ग्राफिक्स कार्ड के साथ भद्दा कंप्यूटर के रूप में कल्पना कर सकते हैं।

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

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

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

कथित प्रदर्शन को अनुकूलित करने का मेरा पसंदीदा उदाहरण TiVo है। तेरह साल पहले, जब पहला TiVo आया, तो वे अविश्वसनीय रूप से धीमे थे (16 MB RAM और 54 MHz CPU!)। रिमोट कंट्रोल पर कुछ दबाए जाने के बाद कुछ होने से पहले यह दर्दनाक रूप से लंबा हो सकता था, खासकर अगर आपने कुछ खेलना या रिकॉर्ड करना शुरू कर दिया। हालांकि, किसी ने कभी यह शिकायत नहीं की कि TiVo धीमा है। मेरी राय में, यह ध्वनि के कारण है। TiVo इंटरफ़ेस का सबसे परिचित हिस्सा वह माधुर्य है जो किसी भी बटन को दबाने के बाद आपको लगता है। वह ध्वनि तुरन्त बजाई। TiVo के इंजीनियरों ने साउंड लोड को जल्द से जल्द कर दिया, ताकि आगे क्या हो, यूजर को पता चले कि इंटरफेस डेड नहीं है। इस शॉर्ट ट्यून ने उपयोगकर्ताओं को बताया कि उनके अनुरोध को सुना गया था।
नेट पर, हमने एक समझौता किया है जो एक ही काम करता है: एक स्पिनर। क्लिक के बाद, स्पिनर तुरंत दिखाई देता है और इस प्रकार, उपयोगकर्ता को एक संदेश मिलता है कि उन्होंने उसे सुना है। मोबाइल फोन में, हमें अलग तरीके से करना चाहिए।

इशारे क्लिकों की तरह असतत कार्य नहीं हैं। हालाँकि, इंटरफ़ेस को तेज़ बनाने के लिए, हमें उपयोगकर्ताओं को कुछ प्रतिक्रिया देनी होगी। जैसा कि वे कीटनाशक करते हैं, हम इंटरफ़ेस को किसी तरह से स्थानांतरित करते हैं ताकि उन्हें पता चले कि हम उन्हें "सुनते हैं"।

उपकरण

उत्तरदायी इंटरफेस को तत्वों को जितनी जल्दी हो सके स्थानांतरित करने की आवश्यकता होती है। संचलन द्वारा, हम उपयोगकर्ता को दिखाते हैं कि इंटरफ़ेस उनके अनुरोध का जवाब दे रहा है। जावास्क्रिप्ट एनिमेशन का उपयोग इसके लिए बहुत धीमा है। इसके बजाय, हम CSS ट्रांसफ़ॉर्म और ट्रांज़िशन का उपयोग करते हैं: प्रदर्शन के लिए ट्रांसफ़ॉर्म और ट्रांज़िशन, ताकि ऐनिमेशन जावास्क्रिप्ट निष्पादन को अवरुद्ध किए बिना काम कर सके।
इस ट्यूटोरियल में, सभी आंदोलनों और एनिमेशन के लिए, मैं CSS परिवर्तनों और बदलावों का उपयोग करूँगा।
एक और अनुकूलन जिसे मैं जितना संभव हो उतना उपयोग करना चाहता हूं, जैसा कि मैं "राइट-ओनली डोम" कहता हूं। DOM से पठन गुण और मान जटिल है और आमतौर पर अनावश्यक है। लाइटबॉक्स के लिए, मैं शुरुआती चरण में सभी रीडिंग को संयोजित करने का प्रयास करूंगा। उसके बाद, मैं जावास्क्रिप्ट में राज्य बनाए रखूंगा और, यदि आवश्यक हो, तो सरल अंकगणित कर सकता हूं।

लाइटबॉक्स निर्माण

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

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

रिटर्न एनीमेशन महत्वपूर्ण है। उसके लिए धन्यवाद, उपयोगकर्ता कभी नहीं सोचेंगे कि इंटरफ़ेस मर चुका है।

शुरुआत

निम्न फ़ाइलें बनाएँ:
lightbox/
reset.css
slides.css
slides.html
slides.js

टेम्पलेट

HTML सरल होगा। यह केवल एक डेमो के लिए नहीं है। एक जटिल DOM ट्री डेफिनिशन स्लो है। शैलियाँ, तत्व DOM निष्कर्षण और दृश्य प्रभाव सभी अधिक जटिल DOM ट्री के साथ अधिक कठिन हैं। चूंकि हम "भद्दे कंप्यूटर" पर ध्यान केंद्रित करते हैं, इसलिए हर बिट गिना जाता है, इसलिए चीजों को शुरू से ही सरल रखना महत्वपूर्ण है।

मैं CSS को शून्य करने के लिए Eric Meyer से reset.css का उपयोग कर रहा हूं। मैं व्यूपोर्ट को भी समायोजित करता हूं ताकि यह पैमाने पर न हो।

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

JS की तरफ, मैं zepto.js का उपयोग करता हूं, jQuery सिंटैक्स के साथ बहुत हल्का प्लेटफॉर्म। वास्तव में, किसी भी प्लेटफ़ॉर्म की कोई आवश्यकता नहीं है, लेकिन यह कुछ कार्यों को थोड़ा गति देगा। वास्तविक जेस्चर इंटरैक्शन के लिए, हम अंतर्निहित API का उपयोग करेंगे।

 <div class="main"> <div class="welcome"> <h1>Welcome to an amazing carousel!</h1> <p>This is an example of a nice touch interface</p> </div> <div class="carousel"> <ul> <li> <a href="http://www.flickr.com/photos/protohiro/6664939239/in/photostream/"> <img data-full-height="427" data-full-width="640" src="http://farm8.staticflickr.com/7142/6664939239_7a6c846ec9_s.jpg"> </a> </li> <li> <a href="http://www.flickr.com/photos/protohiro/6664957519/in/photostream"> <img data-full-height="424" data-full-width="640" src="http://farm8.staticflickr.com/7001/6664957519_582f716e38_s.jpg"> </a> </li> <li> <a href="http://www.flickr.com/photos/protohiro/6664955215/in/photostream"> <img data-full-height="640" data-full-width="427" src="http://farm8.staticflickr.com/7019/6664955215_d49f2a0b18_s.jpg"> </a> </li> <li> <a href="http://www.flickr.com/photos/protohiro/6664952047/in/photostream"> <img data-full-height="426" data-full-width="640" src="http://farm8.staticflickr.com/7017/6664952047_6955870ecb_s.jpg"> </a> </li> <li> <a href="http://www.flickr.com/photos/protohiro/6664948305/in/photostream"> <img data-full-height="428" data-full-width="640" src="http://farm8.staticflickr.com/7149/6664948305_fb5a6276e5_s.jpg"> </a> </li> </ul> </div> </div> </body> <script src="zepto.min.js" type="text/javascript" charset="utf-8"></script> <script src="slides.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> //this code initializes the lightbox and shows it when the user //clicks on a slide $(document).ready(function(){ var lightbox = new saw.Lightbox('.carousel'); $(document).on('click', 'a', function(e){ e.preventDefault(); lightbox.show(this.href); }); }); </script> </html> 

थंबनेल स्टाइल

अब कुछ अच्छे छोटे थंबनेल और कुछ अन्य दृश्य प्रभाव जोड़ें:

 html { background: #f1eee4; font-family: georgia; color: #7d7f94; } h1 { color: #ba4a00; } .welcome { text-align: center; text-shadow: 1px 1px 1px #fff; } .welcome h1 { font-size: 20px; font-weight: bold; } .welcome { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ margin:5px; padding:10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); border-radius: 5px; } .carousel { margin:5px; } .carousel ul li { height: 70px; width: 70px; margin: 5px; overflow: hidden; display: block; float: left; border-radius: 5px; box-shadow: 1px 1px 2px rgba(0,0,0,0.5), -1px -1px 2px rgba(255,255,255,1); } 

मुख्य लाइटबॉक्स

लाइटबॉक्स के लिए जावास्क्रिप्ट को कई अलग-अलग काम करने चाहिए:

• लाइटबॉक्स डेटा एकत्र करें और आरंभ करें
• छिपाना और लाइटबॉक्स दिखाना
• लाइटबॉक्स रैपर के लिए HTML बनाएं
• स्लाइड बनाएं
• इशारों के लिए घटनाओं को संभालना

सेवा कार्य

बार-बार "-webkit-transform" और "Translate3d" लिखने के बजाय, मैं कुछ उपयोगिता फ़ंक्शंस बनाऊंगा ताकि वे मेरे लिए काम करें।

 function prefixify(str) { var ua = window.navigator.userAgent; if(ua.indexOf('WebKit') !== -1) { return '-webkit-' + str; } if(ua.indexOf('Opera') !== -1) { return '-o-' + str; } if(ua.indexOf('Gecko') !== -1) { return '-moz-' + str; } return str; } function setPosition(node, left) { // node.css('left', left +'px'); node.css(prefixify('transform'), "translate3d("+left+"px, 0, 0)"); } function addTransitions(node){ node.css(prefixify('transition'), prefixify('transform') + ' .25s ease-in-out'); node[0].addEventListener('webkitTransitionEnd', function(e){ window.setTimeout(function(){ $(e.target).css('-webkit-transition', 'none'); }, 0) }) } function cleanTransitions(node){ node.css(prefixify('transition'), 'none'); } 

जब पृष्ठ चीजों को गति देने के लिए लोड होता है, तो हमारा लाइटबॉक्स विजेट आरंभ करेगा। प्रारंभ में पृष्ठ पर सभी थंबनेल खोजने और डेटा मॉडल बनाने में शामिल हैं। हम HTML बनाने और ईवेंट हैंडलर संलग्न करने के लिए लाइटबॉक्स की प्रतीक्षा करेंगे।

प्रारंभ

लाइटबॉक्स के लिए, मैं एक कंस्ट्रक्टर का उपयोग करता हूं जो एक ब्लॉक चयनकर्ता को इसके एकमात्र पैरामीटर के रूप में लेता है।

 //clean namespacing window.saw = (function($){ //the lightbox constructor function Lightbox (selector) { var container_node = $(selector), wrapper, chromeBuilt, currentSlide = 0, slideData =[], boundingBox = [0,0], slideMap = {}; function init(){ //init function } return { show: show, hide: hide }; } return { Lightbox:Lightbox }; }($)); 

Init फ़ंक्शन सभी ली टैग्स को कैप्चर करता है, थंबनेल पाता है और स्लाइडडाटा सरणी में जानकारी लिखता है। एक ही समय में, मैं एक "स्लाइडपैड" ऑब्जेक्ट बनाता हूं जो "स्लाइडडाटा" सरणी में "href" थंबनेल दिखाता है। यह मुझे सरणी में सभी डेटा के माध्यम से चक्र करने या अतिरिक्त जानकारी के साथ DOM को सजाने के बिना क्लिक करके डेटा को जल्दी से खोजने की अनुमति देता है।

 function init(){ var slides = container_node.find('li'); slides.each(function(i, el){ var thisSlide = {}, thisImg = $(el).find('img'); thisSlide.url = thisImg.attr('src'); thisSlide.height = thisImg.attr('data-full-height'); thisSlide.width = thisImg.attr('data-full-width'); thisSlide.link = $(el).find('a').attr('href'); //push the slide info into the slideData array while recording the array index in the slideMap object. slideMap[thisSlide.link] = slideData.push(thisSlide) - 1; }); } 

शेष आरंभीकरण "शो" विधि में होता है।

 //this is the function called from the inline script function show(startSlide){ if(!chromeBuilt){ buildChrome(); attachEvents(); } wrapper.show(); //keep track of the viewport size boundingBox = [ window.innerWidth, window.innerHeight ]; goTo(slideMap[startSlide]); } 

शैल निर्माण

बिल्डक्रोम फ़ंक्शन लाइटबॉक्स के लिए एक एचटीएमएल आवरण बनाता है और फिर सेमाफोर सेट करता है ताकि उपयोगकर्ता के छिपने या लाइटबॉक्स को दिखाने के लिए रैपर हर बार पुनर्निर्माण न करें। उपयोग में आसानी के लिए, मैंने स्वयं HTML के लिए एक अलग टेम्पलेट फ़ंक्शन बनाया:

 var wrapperTemplate = function(){ return '<div class="slidewrap">'+ '<div class="controls"><a class="prev" href="#">prev</a> | <a class="next" href="#">next</a></div>'+ '</div>'; } function buildChrome(){ wrapper = $(wrapperTemplate()).addClass('slidewrap'); $('body').append(wrapper); chromeBuilt = true; } 

शेल बनाने में अंतिम चरण अगले और पिछले लिंक के लिए एक इवेंट हैंडलर जोड़ना है:

 function handleClicks(e){ e.preventDefault(); var targ = $(e.target); if(targ.hasClass('next')) { goTo(currentSlide + 1); } else if(targ.hasClass('prev')){ goTo(currentSlide - 1); } else { hide(); } } function attachEvents(){ wrapper.on('click', handleClicks, false); } 

अब लाइटबॉक्स शेल कई स्लाइडों के साथ काम करने के लिए तैयार है। मेरे शो फ़ंक्शन में, मैं पहली स्लाइड लोड करने के लिए goTo () कहता हूं। यह फ़ंक्शन मापदंडों द्वारा पहचानी गई एक स्लाइड दिखाता है, लेकिन यह धीरे-धीरे स्लाइड भी बनाता है, अगर मुझे उनकी आवश्यकता होती है। (महत्वपूर्ण: निचले मामले में "goTo" फ़ंक्शन को निर्दिष्ट न करें, क्योंकि "गोटो" जावास्क्रिप्ट में एक आरक्षित शब्द है)।

स्लाइड निर्माण

अब मैं जिस स्लाइड को देख रहा हूं वह देखने के क्षेत्र में है, और पिछली और अगली स्लाइड क्रमशः स्क्रीन के दृश्य क्षेत्र के बाएं और दाएं हिस्से में हैं। जब उपयोगकर्ता "अगला" बटन को छूता है, तो वर्तमान स्लाइड बाईं ओर जाती है, और उसे अगली स्लाइड द्वारा बदल दिया जाता है।

 //for the slides, takes a "slide" object function slideTemplate(slide){ return '<div class="slide"><span>'+slide.id+'</span><div style="background-image:url('+slide.url.replace(/_s|_q/, '_z')+')"></div></div>'; } 

मैं इसके बजाय उपयोग करता हूं क्योंकि (कम से कम अभी के लिए) मोबाइल ब्राउज़र पृष्ठभूमि छवि के साथ बहुत अधिक धीरे-धीरे प्रस्तुत करते हैं। मोबाइल उपकरणों के साथ काम करते समय, गति आमतौर पर पसंद की जाती है। पहुंच के मुद्दों को आसानी से ARIA भूमिका के साथ हल किया जा सकता है।

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

 function buildSlide (slideNum) { var thisSlide, s, img, scaleFactor = 1, w, h; if(!slideData[slideNum] || slideData[slideNum].node){ return false; } var thisSlide = slideData[slideNum]; var s = $(slideTemplate(thisSlide)); var img = s.children('div'); //image is too big! scale it! if(thisSlide.width > boundingBox[0] || thisSlide.height > boundingBox[1]){ if(thisSlide.width > thisSlide.height) { scaleFactor = boundingBox[0]/thisSlide.width; } else { scaleFactor = boundingBox[1]/thisSlide.height; } w = Math.round(thisSlide.width * scaleFactor); h = Math.round(thisSlide.height * scaleFactor); img.css('height', h + 'px'); img.css('width', w + 'px'); }else{ img.css('height', thisSlide.height + 'px'); img.css('width', thisSlide.width + 'px'); } thisSlide.node = s; wrapper.append(s); //put the new slide into the start poisition setPosition(s, boundingBox[0]); return s; } 

गोटो

"GoTo" व्यूपोर्ट में अनुरोधित और आसन्न स्लाइड्स को स्थानांतरित करता है।

 function goTo(slideNum){ var thisSlide; //if the slide we are looking for doesn't exist, lets just go //back to the current slide. This has the handy effect of providing //"snap back" feedback when gesturing, the slide will just animate //back into position if(!slideData[slideNum]){ return; } thisSlide = slideData[slideNum]; //build adjacent slides buildSlide(slideNum); buildSlide(slideNum + 1); buildSlide(slideNum - 1); //make it fancy addTransitions(thisSlide.node); //put the current slide into position setPosition(thisSlide.node, 0); //slide the adjacent slides away if(slideData[slideNum - 1] && slideData[slideNum-1].node){ addTransitions(slideData[slideNum - 1 ].node); setPosition( slideData[slideNum - 1 ].node , (0 - boundingBox[0]) ); } if(slideData[slideNum + 1] && slideData[slideNum + 1].node){ addTransitions(slideData[slideNum + 1 ].node); setPosition(slideData[slideNum + 1 ].node, boundingBox[0] ); } //update the state currentSlide = slideNum; } 

फिलहाल, लाइटबॉक्स अधिक या कम कार्यात्मक है। हम अगली और पिछली स्लाइड पर जा सकते हैं, हम इसे छिपा सकते हैं और दिखा सकते हैं। यह जानना आदर्श होगा कि हम पहली या आखिरी स्लाइड पर कब पहुँचते हैं: आप, उदाहरण के लिए, ग्रे नियंत्रण प्रदर्शित कर सकते हैं। यह डेस्कटॉप और टच डिवाइस दोनों पर लागू होता है।

इशारा समर्थन जोड़ना

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

स्पर्श घटना प्रसंस्करण

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

तीन संवेदी घटनाएं हैं जिन्हें हम इस उदाहरण में देखेंगे: टचस्टार्ट, टचमोव और टचेंड। एक स्पर्शक घटना भी होती है जब किसी कारण से एक इशारा बाधित होता है (उदाहरण के लिए, एक धक्का संदेश)। विकास के दौरान, आपको उन्हें सही ढंग से संभालना चाहिए।

 function attachTouchEvents() { var bd = document.querySelector('html'); bd.addEventListener('touchmove', handleTouchEvents); bd.addEventListener('touchstart', handleTouchEvents); bd.addEventListener('touchend', handleTouchEvents); } 

ईवेंट हैंडलर TouchEvent ऑब्जेक्ट प्राप्त करता है। टचस्टार्ट और टचमोव इवेंट में टच गुण होते हैं, जो टच सरणी का एक ऑब्जेक्ट है। अपनी उंगली को स्लाइड करने के लिए, आपको केवल एक संपत्ति की आवश्यकता है: "क्लाइंटएक्स"। इसमें पृष्ठ के ऊपरी बाएं कोने के सापेक्ष स्पर्श स्थिति का मान होता है।

iOS डिवाइस एक साथ ग्यारह टच तक का समर्थन करते हैं। Android (आइसक्रीम सैंडविच से पहले) केवल एक का समर्थन करता है। अधिकांश इंटरैक्शन के लिए केवल एक स्पर्श की आवश्यकता होती है। अधिक जटिल इशारे आपको कई स्पर्शों के बारे में चिंतित करते हैं।

फ़ंक्शन "हैंडलट्वेंट"

सबसे पहले, हम इस फ़ंक्शन के बाहर कई चर को राज्यों को समर्थन करने के लिए परिभाषित करते हैं:

 var startPos, endPos, lastPos; 

निम्नलिखित शाखा एक घटना वस्तु के प्रकार पर आधारित है:

 function handleTouchEvents(e){ var direction = 0; //you could also use a switch statement if(e.type == 'touchstart') { } else if(e.type == 'touchmove' ) { } else if(e.type == 'touchend) { } 

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

 if(e.type == 'touchstart') { //record the start clientX startPos = e.touches[0].clientX; //lastPos is startPos at the beginning lastPos = startPos; //we'll keep track of direction as a signed integer. // -1 is left, 1 is right and 0 is staying still direction = 0; //now we clean off the transtions if(slideData[currentSlide] && slideData[currentSlide].node){ cleanTransitions(slideData[currentSlide].node); } if(slideData[currentSlide + 1] && slideData[currentSlide + 1].node){ cleanTransitions(slideData[currentSlide + 1].node); } if(slideData[currentSlide - 1] && slideData[currentSlide -1].node){ cleanTransitions(slideData[currentSlide -1].node); } } else if(e.type == 'touchmove' ) { 

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

 }else if(e.type == 'touchmove'){ e.preventDefault(); //figure out the direction if(lastPos > startPos){ direction = -1; }else{ direction = 1; } //make sure the slide exists if(slideData[currentSlide]){ //move the current slide into position setPosition(slideData[currentSlide].node, e.touches[0].clientX - startPos); //make sure the next or previous slide exits if(direction !== 0 && slideData[currentSlide + direction]){ //move the next or previous slide. if(direction < 0){ //I want to move the next slide into the right position, which is the same as the //current slide, minus the width of the viewport (each slide is as wide as the viewport) setPosition(slideData[currentSlide + direction].node, (e.touches[0].clientX - startPos) - boundingBox[0]); }else if(direction > 0){ setPosition(slideData[currentSlide + direction].node, (e.touches[0].clientX - startPos) + boundingBox[0]); } } } //save the last position, we need it for touch end lastPos = e.touches[0].clientX; }else if(e.type == 'touchend'){ 

स्लाइड्स के अंत में, आपको आगे के व्यवहार को निर्धारित करने की आवश्यकता है: एक सर्कल में जाएं या अंतिम स्लाइड पर रुकें। यदि आप उपयोगकर्ता को अंतिम स्लाइड पर छोड़ देते हैं, तो जब आप स्लाइड के माध्यम से स्क्रॉल करने का प्रयास करते हैं, तो आपको इसे वापस अपनी स्थिति में वापस करने की आवश्यकता होती है, इस प्रकार उपयोगकर्ता का फीडबैक दिया जाता है कि स्लाइड क्यों नहीं बदली है।

 }else if(e.type == 'touchend'){ //figure out if we have moved left or right beyond a threshold //(50 pixels in this case) if(lastPos - startPos > 50){ goTo(currentSlide-1); } else if(lastPos - startPos < -50){ goTo(currentSlide+1); }else{ //we are not advancing, so we need to "snap back" to the previous position addTransitions(slideData[currentSlide].node); setPosition(slideData[currentSlide].node, 0); if(slideData[currentSlide + 1] && slideData[currentSlide + 1].node){ addTransitions(slideData[currentSlide + 1]); setPosition(slideData[currentSlide + 1].node, boundingBox[0]); } if(slideData[currentSlide - 1] && slideData[currentSlide - 1].node){ addTransitions(slideData[currentSlide - 1]); setPosition(slideData[currentSlide - 1].node, 0 - boundingBox[0]); } } } 

अब सभी मूल तत्व यथावत हैं। आपके पास एक साधारण टच लाइटबॉक्स है!

अनुवादक से:
यदि आपको कोई अनुवाद त्रुटि मिलती है, तो कृपया निजी संदेशों में सदस्यता समाप्त करें। आपका धन्यवाद