🤸🏻 🔤 👩🏽‍🤝‍👨🏾 JQuery मोबाइल के लिए प्लगइन्स की एक जोड़ी 🍗 😓 🖕🏽

हाल ही में, मुझे jQuery मोबाइल में इस हद तक दिलचस्पी हो गई कि मैं इस पर कुछ गंभीर लिखना चाहता था। सबसे पहले, इस तरह के एक घटक को "हिंडोला" के रूप में लिखने का विचार आया। फिर मेरी निगाह ट्विटर पर पड़ी ... सामान्य तौर पर, काम चल गया और अंत में मुझे दो प्लगइन्स और एक छोटा प्रोजेक्ट मिला, जिसके बारे में मैं विषय के अंत में बात करूंगा।

पहला प्लगइन, जैसा कि मैंने कहा, एक हिंडोला है। यह क्या है, मुझे लगता है, मैं सब कुछ जानता हूं, लेकिन एक तरह से या किसी अन्य डेमो को यहां पाया जा सकता है ।

इस प्लगइन का उपयोग कैसे करें। सबसे पहले, इसे github से डाउनलोड करें और carousel.js और carousel.css कनेक्ट करें।

फिर हम निम्नलिखित HTML कोड बनाते हैं:

<div id="content" style="height:100%;width:300px;"> <div style="height:100%;width:300px;"> <div style="height:460px;width:300px;"> <div id="carousel" class="carousel"> <div id="carousel_scrollpane" class="carousel-content"> <div id="carousel_content" class="carousel-content-scroller"> </div> </div> <div id="carousel_nav" class="carousel-nav"> <div id="carousel_mid" class="carousel-mid"></div> </div> </div> </div> </div>

यह हिंडोला के लिए मार्कअप बनाएगा। अब हमें एक टेम्पलेट की आवश्यकता है जिसके द्वारा प्रत्येक टैब के घटकों को प्रदर्शित किया जाएगा। हम पिछले एक के तुरंत बाद कोड लिखते हैं

 <div id="carousel_template" style="display:none"> <div class="carousel-item"> <div style="height:2em;font-size:1.5em;padding-bottom:15px;">@{title}</div> <div id="carousel_item_@{id}" > <div style="float:left;width:100%"><img src="@{image}" /></div> </div> </div> </div>

@ {Id}, @ {title} और @ {image} क्या हैं। ये वे मान हैं जो नाम के अनुसार इनपुट से लिए जाएंगे।

खैर, हिंडोला ही, जावास्क्रिप्ट कोड:

 var carousel = new $.widgets.Carousel( { uuid : "carousel", args : { "scrollInterval" : 600,"itemWidth":290}, value : [ { "title" : "Tron.Legacy", "image" : "images/1.jpg" }, { "title" : "Yogi Bear", "image" : "images/2.jpg" }, { "title" : "The Chronicles of Narnia: The Voyage of the Dawn Treader", "image" : "images/3.jpg" }, { "title" : "The Fighter", "image" : "images/4.jpg" }, { "title" : "Tangled", "image" : "images/5.jpg" } ] });

हो गया, हिंडोला आपके पृष्ठ पर दिखाई देगा।

अगला घटक लोडअप सूची है। इस तरह के एक घटक को सभी FourSquare उपयोगकर्ताओं द्वारा देखा गया था। यह एक सूची है जिसमें यदि आप अंतिम (पहले) तत्व को खींचते हैं, तो डेटा लोड किया जाएगा।

स्पर्श उपकरणों के लिए एक कार्यशील उदाहरण यहां पाया जा सकता है ।

उपयोग के लिए गीता से jquery.loadup-list.js स्क्रिप्ट डाउनलोड करें।

फिर एक सूची बनाएं जिसके लिए हमें आईडी सेट करना होगा।

 <div data-role="content" > <ul data-role="listview" data-inset="true" data-theme="a" id="long-list" style="position:relative;top:0px;"> </ul> </div>

अब हमें 2 फ़ंक्शन बनाने की आवश्यकता है: ऑनलोडमोव और ऑनलोडफिनिश

जब हम अंतिम सूची आइटम को खींचते हैं तो onloadmove को ट्रिगर किया जाता है

 var onloadmove = function(){ $('#loader').remove(); $("#long-list").parent().append("<div id='loader' style=' margin-left: 45% ; margin-right: 49% ;'><img src='images/loader.gif' alt='Loading...'/></div>"); }

इस स्थिति में, एक एनिमेटेड GIF जोड़ा जाएगा।

जैसे ही हम सूची के अंतिम तत्व को जारी करते हैं, ऑनलोडफिश फायर हो जाता है। तदनुसार, हम इसके लिए सभी अनुरोध लिखते हैं

 var onloadfinish = function(){ $("#long-list li:last-child").removeClass("ui-corner-bottom"); $("#long-list li:last-child").attr("tabindex","-1"); $("#long-list").append('<li role="option" tabindex="0" class="ui-li ui-li-static ui-btn-up-a ui-corner-bottom">2</li>'); $("#long-list").animate({ top: 0}, "fast"); $('#loader').remove(); }

और अब केवल एक लाइन बची है

 $("#long-list").loadup(onloadmove,onloadfinish);

और कर दिया।

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

UPD : jQuery ब्लॉग पर पोर्ट किया गया।

JQuery मोबाइल के लिए प्लगइन्स की एक जोड़ी

More articles: