मोबाइल एप्लिकेशन डिजाइन / देव कस्टम थीम्स jQuery के मोबाइल के साथ

हमारे पहले के jQuery के मोबाइल ट्यूटोरियल में मैंने बहुत सारी अंतर्निहित रूपरेखा पेश की थी और अपनी पहली वेबसाइट की स्थापना के बारे में जाना। जेएस लाइब्रेरी सीखने की कठिनाई के संबंध में हल्की और आसान दोनों है। फ़ाइलों के साथ एक सीएसएस स्टाइलशीट भी शामिल है ताकि आप अपने लेआउट में तत्वों को और अधिक अनुकूलित कर सकें.

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

डिफ़ॉल्ट स्टाइलशीट सामग्री

मुझे यह स्पष्ट करके शुरू करना चाहिए कि डिफ़ॉल्ट फ़ाइलों के साथ सीएसएस कोड किस प्रकार का है। JQM 1.0 से स्टाइलशीट को दो मुख्य खंडों में विभाजित किया गया है - संरचना तथा विषयों.

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

इन आंतरिक थीम तत्वों में से प्रत्येक को भी संदर्भित किया जा सकता है नमूनों. जब आप एक मोबाइल टेम्प्लेट का निर्माण करते हैं, तो आप आम तौर पर एक ही विषय के साथ चिपके रहेंगे। लेकिन लगभग हर परिदृश्य में अलग-अलग रंग योजनाओं के साथ डिज़ाइन को बेहतर बनाया जा सकता है। डिफ़ॉल्ट स्टाइलशीट में केवल ए-ई के स्वैच शामिल हैं, लेकिन आप अपने थीम लाइब्रेरी में एक और 21 विकल्प जोड़ने के लिए एफ-जेड का निर्माण कर सकते हैं। बस इन शब्दों को फिर से स्पष्ट करने के लिए ए विषय 1 सिंगल सीएसएस फाइल मानी जाती है जिसमें 26 अलग-अलग शामिल हो सकते हैं नमूनों लेबल ए-जेड.

स्विचिंग शैलियाँ

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

 
 
डिफ़ॉल्ट jQM पेज
 
 
 
यहाँ कुछ आंतरिक सामग्री है.
 
 
 

ध्यान दें कि मैंने डेटा-थीम विशेषता को रूट पेज डिव पर रखा है। इसका मतलब है कि नया स्वैच रंग सब कुछ प्रभावित करेगा जिसके अंदर हेडर और कंटेंट क्षेत्र दोनों शामिल हैं। मैं इसके अतिरिक्त शामिल हो सकता है डेटा-विषय = "सी" हेडर div में मेरे पेज के बाकी हिस्सों से केवल उस सामग्री को बदलने के लिए.

एक नमूने के घटक

यह बिल्कुल सीधा होना चाहिए कि एक ही लेआउट के भीतर इन विभिन्न स्वैच को कैसे लागू किया जाए। तो अब हम jQM CSS कोड पर एक नज़र डालते हैं ताकि हम एक स्वैच के अलग-अलग घटकों को तोड़ सकें। अपने स्वयं के CDN पर होस्ट किए गए नवीनतम jQuery के मोबाइल 1.4.5 CSS फ़ाइल देखें.

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

/* ए ----------------------------------------------- ---------------------------------------------- * / .यूआई -बार-ए सीमा: 1 पीएक्स सॉलिड # 2 ए 2 ए 2 ए; पृष्ठभूमि: # 111111; रंग: #ffffff; फोंट की मोटाई: बोल्ड; पाठ-छाया: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * * / 1px # 000000; पृष्ठभूमि-छवि: -webkit- ग्रेडिएंट (रैखिक, बाएं ऊपर, बाएं नीचे, (# 3c3c3c) से, (# 111)); / * Saf4 +, क्रोम * / पृष्ठभूमि-छवि: -webkit-linear-gradient (# 3c3c3c, # 111); / * क्रोम 10+, Saf5.1 + * / पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (# 3c3c3c, # 111); / * FF3.6 * / पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (# 3c3c3c, # 111); / * IE10 * / पृष्ठभूमि-छवि: -o-रैखिक-ढाल (# 3c3c3c, # 111); / * ओपेरा 11.10+ * / पृष्ठभूमि-छवि: रैखिक-ढाल (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a बटन फ़ॉन्ट-परिवार: Helvetica, Arial, sans- सेरिफ़;  .ui-bar-a-.ui-link-inherit color: #fff;  .ui-bar-a-.ui-link color: # 7cc4e7 / * a-bar-link-color /; फोंट की मोटाई: बोल्ड;  .ui-bar-a-.ui-link: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a-.ui-link: सक्रिय color: # 2489CE / * a-bar-link-active / /;  .ui-bar-a-.ui-link: दौरा color: # 2489CE / * a-bar-link-visit- /;  

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

• शीर्ष लेख और पाद लेख बार
• बॉडी कंटेंट और पेज टेक्स्ट
• सूची शैलियों
• बटन डिफ़ॉल्ट / हॉवर / सक्रिय बताता है
• फार्म इनपुट नियंत्रण (अतिरिक्त)

एक नई बार डिजाइन कोडिंग

उसी सीएसएस फ़ाइल से हमने पहले की प्रतिलिपि देखी / सभी स्वाच A कोड (पंक्तियाँ 12-150) को एक नई फ़ाइल में पेस्ट किया। हम इन नई शैलियों को लागू करने के लिए स्वैच नाम G का उपयोग कर सकते हैं। अब कोड को कॉपी करने के बाद आप प्रत्येक वर्ग के उदाहरण को समाप्त करना चाहते हैं -ए सेवा मेरे -जी, जैसा कि यह है कि jQuery मोबाइल पहचान करेगा कि किस शैली का उपयोग करना है.

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

.ui-bar-g बॉर्डर: 1px ठोस # 2d3033 / * a-bar-border * /; बॉर्डर-लेफ्ट: 0px; बॉर्डर-राइट: 0px; पृष्ठभूमि: # 6d83a1; color: #fff / * a-bar-color * /; फोंट की मोटाई: बोल्ड; पाठ-छाया: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * * / 1px / * a-bar-shadow-radius * / # 3e4957; बैकग्राउंड-इमेज: -webkit-gradient (रैखिक, 0% 0%, 0% 100%, से (# b4bfce), कलर-स्टॉप (0.5, # 899cb3), कलर-स्टॉप (0.505, # 7e94b0), (# 6d83a1)); पृष्ठभूमि-चित्र: -webkit-linear-gradient (शीर्ष, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * क्रोम 10+, Saf5.1 + * / पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83001); / * FF3.6 * / पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / पृष्ठभूमि-छवि: -o-linear-gradient (शीर्ष, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * ओपेरा 11.10+ * / पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);  

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

बटन और पाठ प्रभाव

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

.ui-btn-up-g बॉर्डर: 1px ठोस # 375073; पृष्ठभूमि: # 4a6c9b; फोंट की मोटाई: बोल्ड; रंग: #fff; पाठ-छाया: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * * / 1px / * a-bup-shadow-radius * / # 40536d; बॉक्स-छाया: कोई नहीं; -वेबकिट-बॉक्स-छाया: कोई नहीं; -मोज़-बॉक्स-छाया: कोई नहीं; पृष्ठभूमि-चित्र: -webkit-gradient (रैखिक, 0% 0%, 0% 100%, (# 89a0be), रंग-रोक (0.5, # 5877a2), रंग-रोक (0.505, # 476999), (#) 4a6c9b)); पृष्ठभूमि-चित्र: -webkit-linear-gradient (शीर्ष, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * क्रोम 10+, Saf5.1 + * / पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / पृष्ठभूमि-छवि: -o-linear-gradient (शीर्ष, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * ओपेरा 11.10+ * / पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); सीमा-त्रिज्या: 4 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 4 पीएक्स; -मोज़-बॉर्डर-रेडियस: 4 पीएक्स;  .ui-btn-up-g -ui-btn-inner, .ui-btn-hover-g -ui-btn-inner, .ui-btn-down-g -ui-btn-inner सीमा-त्रिज्या: 0; -वेबकिट-बॉर्डर-त्रिज्या: 0; -मोज़-बॉर्डर-रेडियस: 0;  .ui-btn-hover-g बॉर्डर: 1px ठोस # 1b49a5; पृष्ठभूमि: # 2463de; फोंट की मोटाई: बोल्ड; रंग: #fff; पाठ-छाया: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * * / 1px / * a-bup-shadow-radius * / # 40536d बॉक्स-छाया: कोई नहीं; -वेबकिट-बॉक्स-छाया: कोई नहीं; -मोज़-बॉक्स-छाया: कोई नहीं; पृष्ठभूमि-छवि: -webkit-gradient (रैखिक, 0% 0%, 0% 100%, (# 779be9), रंग-रोक (0.5, # 376fe0), रंग-रोक (0.505, # 22Ddd), (# 2463de)); पृष्ठभूमि-चित्र: -webkit-linear-gradient (शीर्ष, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * क्रोम 10+, Saf5.1 + * / पृष्ठभूमि-छवि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / पृष्ठभूमि-छवि: -ms-रैखिक-ढाल (शीर्ष, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / पृष्ठभूमि-छवि: -o-linear-gradient (शीर्ष, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * ओपेरा 11.10+ * / पृष्ठभूमि-छवि: रैखिक-ढाल (शीर्ष, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); सीमा-त्रिज्या: 4 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 4 पीएक्स; -मोज़-बॉर्डर-रेडियस: 4 पीएक्स; 

कोड क्षेत्र जिसे हम अभी संपादित कर रहे हैं वह UI बटन कक्षाओं के भीतर है। इससे संबंधित होने के लिए 3 अलग-अलग तरीके हैं: .ui-btn-अप-जी, .ui-btn-मंडराना-जी, तथा .ui-btn-डाउन-जी. मैं ज़्यादातर मानक (btn-up) और hover (btn-hover) के प्रभावों पर ध्यान केंद्रित कर रहा हूँ ताकि बॉक्स शैडो और लीनियर ग्रेडिएंट्स को एडिट किया जा सके। इसके अलावा मैंने गोल कोनों के प्रभाव का विस्तार किया ताकि बटन अधिक आयताकार दिखाई दें.

इस वजह से मुझे शीर्षक वाली कक्षा से आंतरिक सीमा त्रिज्या को हटाने की आवश्यकता है .ui-btn-भीतरी. यह श्रेणी आपके हेडर बार में प्रत्येक एंकर लिंक के भीतर एक स्पैन एलिमेंट पर संलग्न हो जाती है। सीमा त्रिज्या गुणों को रीसेट किए बिना जब भी आप एक बटन पर हॉवर करते हैं, तो आप डिज़ाइन में छोटे ग्लिट्स देखेंगे। जब आप jQuery के मोबाइल थीम पर अधिक समय कोडिंग करते हैं, तो आप भविष्य की परियोजनाओं के लिए इन छोटी बारीकियों को याद करेंगे.

ThemeRoller का परिचय

यदि आपको अपने हाथों को कोड में गंदा करने में मज़ा आता है तो मैं कस्टम संपादन करने के लिए बहुत सलाह देता हूं। न केवल आपके पास अधिक नियंत्रण है, लेकिन सीएसएस के भीतर मुद्दों को डीबग करना बहुत आसान है यदि आपने सभी संपादन खुद किए हैं। लेकिन कई डिजाइनरों के लिए यह प्रक्रिया थकाऊ है और बस आवश्यकता से अधिक समय लगेगा। सौभाग्य से jQuery मोबाइल टीम ने ThemeRoller नाम से एक ऑनलाइन संपादक जारी किया है.

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

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

अंततः आपके jQM स्वैच को ठीक से बनाने की कोई पूर्ण विधि नहीं है। कुछ डिजाइनर हार्ड कोड CSS को पसंद करते हैं जबकि अन्य सहज ज्ञान युक्त ThemeRoller वेब ऐप को पसंद करेंगे। जब तक आप कक्षा संरचना का पालन कर रहे हैं तब तक आपको उसी तरह से परिणाम प्राप्त करना चाहिए.

सहायक संसाधन

• jQuery मोबाइल थीम्स - प्रलेखन
• JQuery मोबाइल थीम का उपयोग करना और अनुकूलित करना