निःशुल्क मोबाइल एप्लिकेशन डिजाइन / देव शुरुआत के गाइड jQuery के मोबाइल के लिए

पिछले 2-3 वर्षों में हमने मोबाइल वेबसाइटों के लिए ब्राउज़र और OS समर्थन में जबरदस्त वृद्धि देखी है। विशेष रूप से एप्पल के आईओएस और Google के एंड्रॉइड प्लेटफ़ॉर्म का ध्यान आता है। लेकिन अन्य लोग जैसे पामोस और ब्लैकबेरी अभी भी मिश्रण में हैं। हाल तक तक इन सभी प्लेटफार्मों में एक मोबाइल थीम का मिलान करना बहुत मुश्किल था.

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

सुविधाएँ और ओएस समर्थन

कारण है कि मैं jQuery मोबाइल किसी भी अन्य चौखटे पर सीखने का सुझाव है सादगी। कोड jQuery कोर पर बनाया गया था और इसमें स्क्रिप्ट लिखने और बग को संपादित करने वाले डेवलपर्स की एक सक्रिय टीम है। कई विशेषताओं में से HTML5 समर्थन, अजाक्स-संचालित नेविगेशन लिंक और टच / स्वाइप इवेंट हैंडलर शामिल हैं.

समर्थन फोन के बीच भिन्न होता है और ए-सी से 3 श्रेणियों के चार्ट में टूट जाता है। A शीर्ष शीर्ष स्तरीय है जो jQuery मोबाइल का पूर्ण समर्थन समेटे हुए है, B में अजाक्स को छोड़कर सब कुछ है जबकि C मूलभूत HTML है जिसमें कोई छोटा जावास्क्रिप्ट नहीं है। सौभाग्य से अधिकांश लोकप्रिय ऑपरेटिंग सिस्टम पूरी तरह से समर्थित हैं - मैंने कुछ उदाहरणों के नीचे एक सूची जोड़ी.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• विंडोज फोन 7
• ब्लैकबेरी 6.0, ब्लैकबेरी 7
• पाम वेबओएस 1.4-2.0, 3.0

यदि आप उनके आधिकारिक डॉक्स पृष्ठ पर अधिक पढ़ने की कोशिश करना चाहते हैं। यह अस्पष्टता में नहीं लिखा है और वास्तव में बहुत आसान लगता है। अब आइए एक jQuery मोबाइल पेज लिखने की मूल बातों पर ध्यान दें और हम एक छोटे से एप्लिकेशन का निर्माण कैसे कर सकते हैं!

मानक HTML टेम्पलेट

अपना पहला मोबाइल ऐप काम करने के लिए एक सेट टेम्प्लेट है जिसे आपको शुरू करना चाहिए। इसमें मोबाइल JS और CSS के साथ jQuery आधार कोड शामिल है, जो jQuery CDN से सभी बाहरी होस्ट किए गए हैं। नीचे मेरा उदाहरण कोड देखें.

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

अगला मेटा टैग एक्स-UA- संगत बस Internet Explorer को HTML को प्रस्तुत करने के लिए सबसे हाल ही में पुनरावृत्ति करने के लिए मजबूर करता है। पुराने ब्राउज़र और विशेष रूप से मोबाइल अपरिचित रेंडरिंग बग्स को प्राप्त करने का प्रयास करेंगे.

शारीरिक सामग्री का निर्माण

अब यह वह जगह है जहाँ jQuery मोबाइल मुश्किल हो सकता है। मोबाइल साइट पर प्रत्येक HTML पेज आवश्यक नहीं है। फ्रेमवर्क HTML5 के डेटा विशेषताओं का उपयोग करता है, जिसे आप जोड़कर एक पूर्णता में बना सकते हैं डेटा- पहले से। इसी तरह डेटा-भूमिका = "पेज" आपको एक से अधिक पृष्ठ देने वाली एक ही HTML फ़ाइल में कई divs पर सेट किया जा सकता है.

आप तब एंकर लिंक और एक अद्वितीय आईडी के साथ इन पृष्ठों के बीच चले जाएंगे। यह सेटअप बुनियादी, सरल ऐप के लिए एक अच्छा विचार है। यदि आपको केवल 3-5 पृष्ठों की आवश्यकता है तो इसे एक ही फाइल में स्टोर क्यों न करें? जब तक आपके पास बहुत अधिक लिखित सामग्री नहीं होती है, तो समय बचाने के लिए PHP का उपयोग करने की कोशिश करें.

नीचे दिए गए कोड उदाहरण की जाँच करें यदि आप खो गए हैं.

 
 
 
शीर्ष शीर्षक बार
 
 
 
एक और पेज दिखाओ??
 
संकेत: नीचे दिए गए बटन पर क्लिक करें!
 
हमारे बारे में
 
  
 
 
 
यहाँ पेज 2
 
 
 
बस कुछ अतिरिक्त सामग्री भी.
 
मेरा मतलब है, आप कर सकते हैं वापस जाओ किसी भी समय.
 
 
   

एक पल के लिए इंडेक्स पेज से एंकर लिंक को देखें। सूचना मैंने विशेषता जोड़ी डेटा-भूमिका = "बटन" बटन के रूप में लिंक को सेटअप करने के लिए। लेकिन इसके बजाय हम डिफ़ॉल्ट शैलियों का उपयोग करते हैं डेटा-विषय = "सी". यह 5 में से 1 (थीम-ए-ई) टेम्प्लेट के बीच स्विच करता है जो डिफ़ॉल्ट रूप से jQ मोबाइल के भीतर सीएसएस शैलियों के रूप में पैक किया जाता है.

मेरा बटन पूरे पृष्ठ की चौड़ाई भी फैलाता है। व्यवहार को हटाने के लिए हमें तत्व को ब्लॉक इनलाइन डिस्प्ले से सेट करना होगा। ऐसा करने का गुण है डेटा-इनलाइन = "true" जिसे आप किसी भी एंकर बटन पर जोड़ सकते हैं.

हैडर और फुटर बार

अपने अनुप्रयोगों के बहुत ऊपर और नीचे के साथ आपको शीर्ष लेख और पाद लेख सामग्री को जोड़ना चाहिए। इस डिजाइन शैली को अक्सर आईओएस ऐप के साथ जोड़ा जाता है जो पहली बार ऐप्पल के मोबाइल ऐप स्टोर का उपयोग करके लोकप्रिय हुआ। jQ मोबाइल हेडर, फुटर और पेज कंटेंट को परिभाषित करने के लिए डेटा-रोल की विशेषताओं का उपयोग करता है। आइए इन क्षेत्रों पर एक संक्षिप्त नज़र डालें.

शीर्ष बार बटन

डिफ़ॉल्ट रूप से शीर्ष बार अन्य मोबाइल एप्लिकेशन के समान फैशन में दो (2) लिंक के एक सेट का समर्थन करता है। IOS का उपयोग करने के लिए चूक “वापस” बाईं ओर बटन और अक्सर एक “विकल्प” या “config” दायीं तरफ.

 
 सेटिंग्स 
यहाँ पेज 2
 
 

ऊपर दिया कोड केवल हेडर कंटेंट के साथ हमारे अबाउट पेज के लिए div कंटेनर पर ध्यान केंद्रित कर रहा है। अतिरिक्त HTML विशेषता डेटा-एड-बैक-btn = "true" केवल तभी काम करेगा जब पेज डेटा रोल पर जोड़ा जाएगा। उद्देश्य स्वचालित रूप से एक बैक बटन शामिल करना है जो आपके ब्राउज़र के बैक बटन के समान काम करता है.

हम सामग्री क्षेत्र में उपयोग किए गए समान कोड के साथ मैन्युअल रूप से एक बैक बटन जोड़ सकते थे। लेकिन मुझे लगता है कि विशेष रूप से कई पृष्ठों पर सेटअप करने में बहुत अधिक समय लगता है। हेडर सेक्शन के भीतर सभी एंकर लिंक लेफ्ट / राइट बटन पोजिशन में डिफॉल्ट होंगे। का उपयोग करके वर्ग = "ui-btn-सही" यह मेरी सेटिंग्स बटन को फिर से तैनात करता है ताकि बैक बटन के लिए खाली जगह हो। इसके अलावा मैं इसे कुछ अतिरिक्त स्पंक देने के लिए द्वितीयक थीम शैलियों का उपयोग कर रहा हूं!

पाद नेविगेशन

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

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

• लाइव डेमो का पूर्वावलोकन करें

तो यहाँ पृष्ठ अनुभाग के लिए कुछ पाद लेख कोड है. डेटा-भूमिका = "नेवबार" कंटेनर तत्व को एक अनियंत्रित सूची में जोड़ा जाना चाहिए और स्वयं यूएल तत्व को नहीं। सूची के भीतर प्रत्येक लिंक को टैब बार के रूप में माना जाता है, जो तब लिंक की कुल संख्या के आधार पर समान रूप से विभाजित होता है। की अतिरिक्त कक्षा ui शरीर ख जैसे ही हम उपलब्ध कुछ शैलियों के बीच स्विच करते हैं, सौंदर्य प्रभाव जोड़ते हैं.

यदि आप पहले बटन पर ध्यान दें, तो मेरे पास विशेषता है डेटा-दिशा = "रिवर्स". भले ही मैं होम बटन पर लौटने से पहले बैक बटन सेटअप का उपयोग कर सकता था, मैंने इसके बजाय पेज आईडी का उपयोग किया है #INDEX. डिफ़ॉल्ट रूप से ऐप विंडो दाईं ओर परिवर्तित हो जाएगी, जो आपको पीछे की ओर जाने के लिए एनीमेशन की उम्मीद करने के बाद बहुत ही कठिन लग रहा है। यदि आपके पास समय है तो आप इन एनिमेटेड प्रभावों के साथ भी खेल सकते हैं। JQuery प्रलेखन में संक्रमण जानकारी पृष्ठ देखें.

अजाक्स और गतिशील पृष्ठ

पहला खंड वास्तव में jQuery के साथ एक मोबाइल ऐप बनाने के लिए महत्वपूर्ण बिंदुओं को खोल दिया है। लेकिन मैं एक नया ऐप शुरू करना चाहता हूं जो बाहरी पेज से डेटा लोड करता है। मैं प्राप्त करने के लिए एक बहुत ही सरल PHP स्क्रिप्ट का उपयोग करूँगा $ _REQUEST [] चर और तदनुसार एक छोटा ड्रिबल शॉट प्रदर्शित करें। नीचे दिए गए स्क्रीनशॉट से आपको पता चल जाएगा कि हम क्या बनाने जा रहे हैं.

पहले मैं डिफ़ॉल्ट टेम्पलेट पर एक index.html पेज सेट करूँगा। इस होम स्क्रीन के लिए मैं प्रत्येक लिंक को प्रदर्शित करने के लिए एक सूची दृश्य सेटअप का उपयोग कर रहा हूं। यह एक के साथ सामग्री क्षेत्र में किया जाता है डेटा-भूमिका = "सूचीदृश्य" सूची कंटेनर पर विशेषता। पहले की तरह ही शीर्ष लेख सामग्री को काटते हुए, मैंने नीचे दिए गए इस नए इंडेक्स पेज से अपना सभी कोड जोड़ा.

 
 
 
अक्टूबर 2011 शॉट्स
 
 
 
 
पहली छवि
 
दूसरी छवि
 
तीसरी छवि
 
चौथी छवि
 
 
  
   

मेरी सूची देखने के एंकर लिंक में से प्रत्येक एक ही फ़ाइल को इंगित करता है - index.php। लेकिन हम पैरामीटर में गुजर रहे हैं imgid एक अनुरोध चर के रूप में। Image.php फ़ाइल पर हम ID लेते हैं और इसे 4 प्रीसेट मानों के विरुद्ध टेस्ट करते हैं। यदि कोई मैच अप हम मिलान छवि URL और शीर्षक का उपयोग करते हैं, अन्यथा हम केवल एक डिफ़ॉल्ट ड्रिबल शॉट प्रदर्शित करते हैं.

छवि लोडर स्क्रिप्ट

Image.php स्क्रिप्ट में अभी भी कोड में डिफ़ॉल्ट jQuery मोबाइल टेम्प्लेट है। यह वास्तव में एक बहुत ही हेडर और पाद लेख साझा करता है, सिवाय हमारी बैक लिंक विशेषता के डेटा-एड-बैक-btn = "true". ध्यान दें कि यह बटन केवल तब दिखाई देगा जब हम पहले index.html से आते हैं! सीधे छवि लोड करने का प्रयास करें। पीपी और कुछ भी नहीं दिखाई देगा क्योंकि वहाँ नहीं है “वापस” को स्थानांतरित करने को.

मुझे लगता है कि हम पहले मेरे PHP तर्क की जांच करके कोड का थोड़ा और अर्थ बना सकते हैं। हम एक का उपयोग करें स्विच / मामला 4 अलग-अलग आईडी के खिलाफ जांच करने और हेडर शीर्षक, छवि URL और मूल कलाकार स्रोत लिंक प्रदान करने की विधि.

सभी काफी सीधे-सादे लगते हैं - यहां तक ​​कि एक नौसिखिया पीएचपी देव को भी इसका पालन करने में सक्षम होना चाहिए! और अगर आप यह नहीं समझते हैं कि यह वैसे भी jQuery कोड के लिए महत्वपूर्ण नहीं है, तो चिंता न करें। हमें अब स्विच करना चाहिए और इस नए पृष्ठ में मेरे द्वारा बनाए गए टेम्पलेट पर एक नज़र रखना चाहिए। सभी HTML कोड उस पूरे PHP ब्लॉक के बाद जोड़े जाते हैं। मैंने की आईडी का इस्तेमाल किया “इमेजिस” कंटेनर के लिए और यहां तक ​​कि हेडर को प्रत्येक नई तस्वीर के साथ बदलने के लिए सेटअप करें.

 
 
 
 
 
 मूल देखें
 
www.dribbble.com
 
 

 
 
  
Wunderkit के कार्य
 
सेबस्टियन सीरर द्वारा
 
  
Colleeeeeeeeeeeeege
 
स्कॉट हिल द्वारा
 
  
फ़ेसबुक के लिए फ़ोरम ऐप
 
Ionut ज़म्फिर द्वारा
 
  
ट्विटर
 
सैम जोन्स द्वारा
 
 
 

के लिए कक्षाएं ui-ली-शीर्षक तथा ui-लि-desc डिफ़ॉल्ट रूप से jQuery के मोबाइल स्टाइलशीट में जोड़े जाते हैं। यह छवि वर्ग के समान है ui-लि-अंगूठे जो स्वचालित रूप से छवि ऊंचाई के अनुसार प्रत्येक सूची दृश्य बार को पुन: आकार देता है। अब यहाँ से आप एनिमेशन, पेज इफेक्ट्स, स्टाइलशीट आदि के साथ फ्रंटेंड पर अधिक निर्माण कर सकते हैं.

या वैकल्पिक रूप से आप नई छवियों को अपलोड करने के लिए एक बैकएंड सिस्टम का निर्माण शुरू कर सकते हैं और सूची में शामिल करने के लिए स्वचालित रूप से थंबनेल ट्रिम कर सकते हैं। JQuery मोबाइल के साथ इतना लचीलापन है कि आप लगभग इसे केवल जावास्क्रिप्ट लाइब्रेरी के रूप में लेबल नहीं कर सकते। यह त्वरित और स्केलेबल मोबाइल एप्लिकेशन बनाने के लिए संपूर्ण HTML5 / CSS / jQuery फ्रेमवर्क से अधिक है.

निष्कर्ष

इस लेख को लिखने के रूप में jQuery मोबाइल टीम ने आधिकारिक तौर पर कोड लाइब्रेरी का RC1.0 बाहर रखा है। इसका मतलब यह है कि अगर सभी बग बग को ठीक नहीं किया गया है और अब परीक्षक पूरी रिहाई के लिए कमर कस रहे हैं। इस वजह से आपको वेब पर पूरी जानकारी नहीं मिलेगी.

लेकिन जैसा कि महीनों पहले वेब डेवलपर्स प्रवृत्ति पर लेने के लिए सुनिश्चित हैं। स्मार्टफोन में भारी वृद्धि के साथ मोबाइल एप्लिकेशन और यहां तक ​​कि मोबाइल वेब लेआउट लोकप्रियता में बढ़ रहे हैं। वेब डेवलपर्स के पास Android / iOS ऐप्स बनाने के लिए पूर्ण प्रोग्रामिंग भाषा सीखने का समय नहीं है। इस प्रकार jQuery मोबाइल एक पतला विकल्प है जिसमें मोबाइल उद्योग सॉफ्टवेयर के बहुमत के लिए समर्थन शामिल है, और सक्रिय डेवलपर समुदाय के साथ प्रत्येक दिन बढ़ रहा है.