🤳🏿 🛎️ 👎🏿 JQuery मोबाइल पर एक सरल अनुप्रयोग लिखना 🛴 📮 👎🏽

JQuery के मोबाइल ढांचे को अपेक्षाकृत लंबे समय के लिए जारी किया गया है, लेकिन केवल अब मैं इसे करने में कामयाब रहा। इससे पहले मैंने jQTouch और Sencha Touch से निपटा था। उनमें से प्रत्येक के पास इसके पेशेवरों और विपक्ष हैं, लेकिन आज यह jQuery मोबाइल पर विकास के बारे में होगा। मूल अनुभव प्राप्त करने के लिए, मैं कई पृष्ठों के साथ एक सरल अनुप्रयोग के निर्माण, ट्विटर और गूगल मैप्स के साथ एकीकरण और बुनियादी तत्वों के एक सेट का वर्णन करूंगा। चलो चलते हैं!

इसलिए, पहले हम रूपरेखा और शैलियों को जोड़ेंगे।

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

अब पृष्ठों पर चलते हैं। यहां यह jQuery के मोबाइल और jQTouch के बीच समानता को ध्यान देने योग्य है - संपूर्ण एप्लिकेशन एक html पृष्ठ है जिस पर एक विशेष तरीके से चिह्नित divs एप्लिकेशन के "पृष्ठ" हैं। इस तरह के "आवेदन पृष्ठ" का मूल रूप इस प्रकार है:

 <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>

डेटा-रोल पैरामीटर div भूमिका निर्दिष्ट करता है: पेज, हेडर, पेज कंटेंट, या पाद। डिव डेटा-रोल = "पेज" के लिए आईडी पैरामीटर सेट करना भी आवश्यक है ताकि आप एप्लिकेशन के माध्यम से नेविगेट कर सकें।

तुरंत उल्लेख के लायक एक और पैरामीटर डेटा-थीम है । यह विकल्प सभी पृष्ठ तत्वों पर लागू होता है और निर्धारित करता है कि कौन सी डिफ़ॉल्ट शैलियों का उपयोग करना है। उपलब्ध विषयों के उदाहरण यहां देखे जा सकते हैं ।

तो, हमारे आवेदन के मुख्य पृष्ठ पर एक मेनू होगा, जिनमें से तत्व उदाहरणों के साथ पृष्ठों पर ले जाएंगे। मेनू बनाने के लिए हमें उल की सूची चाहिए। यह इस तरह दिखेगा:

 <ul data-role="listview" data-inset="true" data-theme="a"> <li><a href="#twitter_page">Twitter example</a></li> <li><a href="#map_page">Map example</a></li> <li><a href="#search">Search example</a></li> <li><a href="#about">About</a></li> </ul>

उल टैग विकल्पों के बारे में:

data-role = "listview" - इंगित करता है कि यह एक सूची है, जिस पर शैलीकरण लागू किया जाना चाहिए;
data-inset = "true" - सूची स्क्रीन की संपूर्ण चौड़ाई पर प्रदर्शित नहीं होती है; यदि नहीं, तो यह झूठी के बराबर है;
data-theme = "a" - रंग योजना लागू करना a।

JQuery मोबाइल में आप कई प्रकार की सूचियां पा सकते हैं: सरल, आइकनों के साथ, छवियों के साथ, और अन्य। उदाहरण यहां देखे जा सकते हैं ।

मैं यह भी चाहता हूं कि टूलबार में एक सेटिंग बटन हो। यह करना बहुत आसान है:

 <a href="#settings" data-icon="gear" class="ui-btn-right">Options</a>

जैसा कि आप देख सकते हैं, यह बटन सेटिंग पेज की ओर जाता है, एक गियर आइकन ( डेटा-आइकन = "गियर" ) है और यह टूलबार ( कक्षा = "ui-btn-right" ) के दाईं ओर स्थित है । रूपरेखा में पहले से ही पूर्वनिर्धारित आइकन का एक सेट है, आप उन्हें यहां देख सकते हैं।

अंत में, मुख्य पृष्ठ इस तरह दिखेगा:

 <div data-role="page" id="main_page" data-theme="b"> <div data-role="header" > <h1 id="twi_acc">Home page</h1> <a href="#settings" data-icon="gear" class="ui-btn-right">Options</a> </div> <div data-role="content" > <ul data-role="listview" data-inset="true" data-theme="a"> <li><a href="#twitter_page">Twitter example</a></li> <li><a href="#map_page">Map example</a></li> <li><a href="#search">Search example</a></li> <li><a href="#about">About</a></li> </ul> </div> <div data-role="footer"> </div> </div>

अब बाकी पेज बनाने के लिए आगे बढ़ते हैं। आइए सेटिंग्स पेज पर जाएं। इस पर हम कुछ फार्म तत्वों को रखेंगे, जिनकी एक पूरी सूची यहां पाई जा सकती है ।

मैनुअल एक विशिष्ट div के भीतर सभी तत्वों को समूहीकृत करने की सिफारिश करता है:

 <div data-role="fieldcontain"> </div>

हम इस सिफारिश का पालन करते हैं।

फार्म पर निम्नलिखित तत्व रखें।

इनपुट फ़ील्ड

 <label for="name">My name:</label> <input type="text" name="name" id="name" value="" />

बड़ा टेक्स्ट बॉक्स

 <label for="textarea">About myself:</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>

स्लाइडर, इसे अधिकतम, न्यूनतम और वर्तमान मूल्य पर सेट करना

 <label for="slider">Value this site:</label> <input type="range" name="slider" id="slider" value="0" min="-50" max="50" />

स्विच

 <label for="slider2">Value this site:</label> <select name="slider2" id="slider2" data-role="slider"> <option value="off">Like</option> <option value="on">Dislike</option> </select>

और चयनकर्ता

 <select name="select-choice-1" id="select-choice-1"> <option value="standard">Tired</option> <option value="standard">Happy</option> <option value="standard">Sick</option> <option value="standard">Sunny</option> </select>

यह सब सेटिंग पेज के साथ है। वैसे, यदि आप मौजूदा कोड चलाते हैं और आपके द्वारा बनाए गए पृष्ठ पर जाते हैं, तो आप देख सकते हैं कि "बैक" बटन स्वचालित रूप से बनाया गया था। एक तिपहिया, लेकिन अच्छा है।

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

 <div data-role="content" > <label for="search">Search</label> <input type="search" name="password" id="search" value="" /> <ul data-role="listview" data-inset="true" id="searchresult"> </ul> </div>

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

 $("#search").keyup(function(){ var res = shuffle(monthes); var list=''; $.each(res, function(index, value) { list+='<li role="option" tabindex="0" data-theme="a" class="ui-btn ui-li ui-btn-up-a"><div class="ui-btn-inner"><div class="ui-btn-text">'+value+'</div><span class="ui-icon ui-icon-arrow-r"></span></div></li>'; }); $("#searchresult").html(list); });

कोड के बारे में कुछ शब्द। पहली पंक्ति में, हम मौजूदा सरणी को मिलाते हैं। नीचे फेरबदल समारोह।

 var shuffle = function(o){ //v1.0 for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; };

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

अब कुछ दिलचस्प पेज बनाएं। पहले @Anywhere का उपयोग करके ट्विटर के साथ काम करेंगे। सबसे पहले, आवश्यक लाइब्रेरी कनेक्ट करें:

 <script src="http://platform.twitter.com/anywhere.js?id=key_value&v=1" type="text/javascript"></script>

कुंजी प्राप्त करने के लिए आपको यहां पंजीकरण करना होगा।

फिर हम उस पेज का कोड बनाते हैं जिसकी हमें आवश्यकता है।

 <div data-role="page" id="twitter_page" data-theme="b"> <div data-role="header" > <h1>Simple twitter example</h1> </div> <div data-role="content" > <div id="twi_list"></div> </div> <div data-role="footer"> </div> </div>

और अब सबसे महत्वपूर्ण बात यह है कि जावास्क्रिप्ट कोड जिसे तब निष्पादित किया जाएगा जब हमारे द्वारा आवश्यक पेज खुलता है। इस घटना को ट्रैक करने के लिए एक विशेष घटना है जिसे पेजशो कहा जाता है । अन्य घटनाओं के बारे में यहाँ पढ़ें।

 $('#twitter_page').live('pageshow',function(event, ui){ twttr.anywhere(function(T) { T.User.find('andrebrov').timeline().first(20).each(function(status) { $('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>'); }); }); });

@Anywhere के साथ काम करने का विवरण यहां पाया जा सकता है ।

हमारे द्वारा बनाए गए पृष्ठ को खोलने पर, हम देखते हैं कि कुछ समय के लिए यह खाली रहता है - ट्वीट लोड होते हैं। उपयोगकर्ता को यह बताने के लिए कि इस समय कुछ हो रहा है, एक स्पिनर जोड़ें। फिर कोड इस तरह दिखेगा:

 $('#twitter_page').live('pageshow',function(event, ui){ twttr.anywhere(function(T) { $.mobile.pageLoading(); var j=0; T.User.find('andrebrov').timeline().first(20).each(function(status) { $('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>'); j++; if (j==1){ $.mobile.pageLoading(true); } }); }); });

स्पिनर और अन्य उपयोगिताओं के बारे में यहां पढ़ें।

अब मैप पेज पर आते हैं। पहले, फिर से, आवश्यक स्क्रिप्ट कनेक्ट करें

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script>

फिर एक पेज बनाएं

 <div data-role="page" id="map_page" data-theme="b"> <div data-role="header" > <h1>Map example</h1> </div> <div data-role="content" > <div id="map_canvas"></div> </div> <div data-role="footer"> </div> </div>

Map_canvas एलिमेंट में मैप भी होगा। उसे स्टाइल करते हैं

 #map_canvas{ width:100%; height: 100%; position:relative; top:0px; }

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

 $('#map_page').live('pageshow',function(event, ui){ navigator.geolocation.getCurrentPosition(function(location) { var point = new google.maps.LatLng(location.coords.latitude, location.coords.longitude); var myOptions = { zoom: 13, center: point, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var marker = new google.maps.Marker({position: point,map: map}); google.maps.event.addListener(marker, 'click', function() { alert("Current coodinates are: latitude "+location.coords.latitude+", longitude "+location.coords.longitude); }); }); });

और अंत में, मेरे बारे में एक पृष्ठ =) उस पर, सूची आइटम दिलचस्प तत्व होंगे:

घुमावदार Delimiter

 <li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-bar-b ui-corner-top"></li>

वह लिंक जो मेल क्लाइंट को खोलता है

 <li><a href="mailto:mailme@gmail.com" class="ui-link-inherit">EMail me</a></li>

लिंक डायल कर रहा है

 <li><a href="tel:+79000000000" class="ui-link-inherit">Call me</a></li>

लिंक प्रकारों के बारे में यहां पढ़ें।

तो, हमारा आवेदन तैयार है!

अंतिम परिणाम ।

स स स ।

प्रलेखन

अपने काम का आनंद लें!

JQuery मोबाइल पर एक सरल अनुप्रयोग लिखना

More articles: