मोबाइल ऐप डिजाइन / देव बिल्डिंग नेविगेशन jQuery के साथ

स्मार्टफ़ोन अब कुछ बहुत ही कुशल वेब ब्राउज़र से लैस हैं। जावास्क्रिप्ट पहले से कहीं अधिक शक्तिशाली है, और इसे jQuery जैसे कोड पुस्तकालयों की मदद से बढ़ाया जा सकता है। जब आप नवीनतम HTML5 / CSS3 स्पेक्स में जोड़ते हैं, तो कुछ बुनियादी फ्रंट कोड के साथ बहुत तेज़ मोबाइल वेब ऐप बनाना संभव है.

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

• लाइव डेमो
• सोर्स कोड

पृष्ठ संरचना को परिभाषित करना

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

एक्स-UA- संगत इसका उपयोग यह बताने के लिए किया जाता है कि आपके दस्तावेज़ को कुछ ब्राउज़रों में कैसे प्रस्तुत करना चाहिए। एचटीएमएल 5 में कोडिंग करते समय यह एक दिलचस्प परिदृश्य है, इसलिए मुझे इस बारे में बहुत चिंता नहीं होगी। हालाँकि मेटा व्यूपोर्ट टैग बहुत महत्वपूर्ण है। यह मानक ज़ूम किए गए प्रभाव के बजाय मोबाइल ब्राउज़र विंडो को 100% पर सेट करता है.

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

इनर बॉडी कंटेंट

बॉडी टैग के अंदर मैंने आईडी के साथ एक रैपर div सेटअप किया है #W. अंदर मैंने आईडी का उपयोग करके लेआउट को दो और डिवीजनों में तोड़ दिया है #pagebody तथा #navmenu. पूरे पृष्ठ की चौड़ाई 640px तक सीमित होती है, ताकि लेआउट सख्त संख्या में बदल जाए.

 
  
एचके मोबाइल
 
 
 
मोबाइल साइट पर आपका स्वागत है!
 
 
 
 
 
मेनू लिंक
 
 
 
होम
 
हमारे बारे में
 
विज्ञापन दें
 
हमारे लिए लिखें
 
संपर्क
 
गोपनीयता नीति
 
 
 

नेविगेशन मेनू को कम जेड-इंडेक्स मान दिया गया है ताकि #pagebody हमेशा शीर्ष पर है। जावास्क्रिप्ट कोड के नीचे नेविगेशन प्रकट करने के लिए जावास्क्रिप्ट कोड पृष्ठ बॉडी पर एक निश्चित संख्या में स्लाइड करेगा क्योंकि यह महत्वपूर्ण है.

मैंने मोबाइल सफारी में कुछ खराब व्यवहार को रोकने के लिए प्रत्येक। Html पृष्ठ के सामने एक हैश प्रतीक (#) का उपयोग किया है। जब भी आप एक लिंक पर क्लिक करते हैं तो URL बार प्रकट होता है और सामग्री को नीचे धकेलता है। लेकिन जब कोई आईडी संदर्भित करता है तो जावास्क्रिप्ट कॉल के अलावा कुछ भी पुनः लोड नहीं किया जाता है.

सीएसएस पोजिशनिंग

हमारे सीएसएस कोड के अंदर बहुत सी भ्रमित करने वाली सामग्री नहीं है। अधिकांश पोजिशनिंग मैन्युअल रूप से की जाती है और फिर jQuery के माध्यम से हेरफेर की जाती है। लेकिन हमारे दस्तावेज़ में कुछ दिलचस्प टुकड़े हैं.

/ ** @ ग्रूप कोर बॉडी ** / #w #pagebody स्थिति: रिश्तेदार; बायां: 0; अधिकतम-चौड़ाई: 640px; न्यूनतम-चौड़ाई: 320px; z- इंडेक्स: 99999;  #w #navmenu पृष्ठभूमि: # 475566; ऊंचाई: 100%; प्रदर्शन क्षेत्र; स्थिति: निश्चित; चौड़ाई: 300 पीएक्स; बायां: 0px; शीर्ष: 0px; z-index: 0; 

यह शीर्ष खंड पृष्ठ के दोनों वर्गों के लिए शैलियों को परिभाषित करता है। हमारा नौसेना मेनू केवल 300px चौड़ा है, इसलिए यह पृष्ठ सामग्री के लिए अभी भी देखा जा सकता है। खुला / बंद मेनू बटन भी बाईं ओर सीधे स्थित है और हमेशा सुलभ है। यहाँ महत्वपूर्ण टुकड़ा z- सूचकांक संपत्ति मूल्य और उपयोग है स्थिति: निश्चित; हमारे नवमेनू पर.

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

/ ** @ ग्रूप हेडर ** / #w #pagebody हेडर # टूलबारनव प्रदर्शन: ब्लॉक; स्थिति: निश्चित; बायां: 0px; शीर्ष: 0px; z-index: 9999; पृष्ठभूमि: # 0b1851 url ('img / tabbar-solid-bg.png') शीर्ष बाईं ओर कोई दोहराएं नहीं; सीमा-त्रिज्या: 5 पीएक्स; -मोज़-बॉर्डर-रेडियस: 5 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 5 पीएक्स; -ओ-सीमा-त्रिज्या: 5 पीएक्स; बॉर्डर-बॉटम-राइट-रेडियस: 0; -मोज़-बॉर्डर-रेडियस-बॉटम: 0; -वेबकिट-बॉर्डर-बॉटम-राइट-रेडियस: 0; बॉर्डर-बॉटम-लेफ्ट-रेडियस: 0; -मोज़-बॉर्डर-रेडियस-बॉटमफ़्ट: 0; -वेबकिट-बॉर्डर-बायीं-बाईं-त्रिज्या: 0; ऊंचाई: 44 पीएक्स; चौड़ाई: 100%; अधिकतम-चौड़ाई: 640px;  #w #pagebody हैडर # toolbarnav h1 text-align: center; पैडिंग-टॉप: 10 पीएक्स; पैडिंग-राइट: 40 पीएक्स; रंग: # e6e8f2; फोंट की मोटाई: बोल्ड; फ़ॉन्ट-आकार: 2.1em; पाठ-छाया: 1px 1px 0px # 313131; 

मोबाइल नियम

यह नोटिस करना आसान है मैं नीले हेडर बार बनावट के लिए एक पृष्ठभूमि छवि का उपयोग कर रहा हूं। सुसंगत लेआउट संरचना के साथ रखने के लिए इसका आकार 640 × 44 पिक्सेल है। लेकिन मैंने iPhone / iPad रेटिना डिस्प्ले के लिए एक छवि @ 2x भी विकसित की है। आप नीचे दिए गए दोनों चित्रों को देख सकते हैं, या उन्हें मेरे डेमो स्रोत कोड से पकड़ सकते हैं.

• System/demo/img/[email protected]
• System/demo/img/[email protected]

मैंने नाम की एक अन्य फ़ाइल में इस कार्यक्षमता के लिए मोबाइल CSS सेटअप किया है responsive.css. इसमें दो मीडिया क्वेश्चन शामिल हैं जो टाइटल बार bg और मेन्यू बटन आइकन को रेटिना डिवाइस के लिए बदल देते हैं.

/ ** रेटिना डिस्प्ले ** / @मीडिया केवल स्क्रीन और (-webkit-min-device-pixel-ratio: 2), केवल स्क्रीन और (min - moz-device-pixel-ratio: 1.5), केवल स्क्रीन और ( min-device-pixel-ratio: 1.5) #w #pagebody हैडर बैकग्राउंड: # 0b1851 url ('img/[email protected] ') टॉप लेफ्ट नो-रिपीट; पृष्ठभूमि का आकार: 640px 44px;  #w #pagebody हैडर # मेन्यू-बीटीएन बैकग्राउंड: url ('img/[email protected] ') नो-रिपीट; पृष्ठभूमि का आकार: 53px 30px; 

डिजाइनिंग मेनू तीर

नेविगेशन क्षेत्र में मैंने प्रत्येक मेनू लिंक के दाईं ओर एक छोटा तीर आइकन भी शामिल किया है। यह आसानी से किसी भी रचनात्मक कॉमन्स कलाकृति से एक छवि के साथ बदला जा सकता है। लेकिन ज्यादातर सभी CSS3 aficionados इस पद्धति का परीक्षण करना पसंद करेंगे.

#w #navmenu ul li a :: content: "के बाद; प्रदर्शन: ब्लॉक; चौड़ाई; 6px; ऊंचाई: 6px; सीमा-सही: 3px ठोस # d0d0d8; सीमा-शीर्ष: 3px ठोस # d0d0d8; स्थिति: निरपेक्ष; : 30px; शीर्ष: 45%; -webkit- परिवर्तन: रोटेट (45deg); -मोज़-ट्रांसफ़ॉर्म: रोटेट (45deg); -ओ-ट्रांसफ़ॉर्म: रोटेट (45deg); ट्रांसफ़ॉर्म: रोटेट (45deg); #w #navmenu ul li a: hover :: के बाद सीमा-रंग: # Cad0e6 ;;

हम उपयोग कर रहे हैं परिवर्तन संपत्ति सामग्री के बाद एक छोटी सी सीमा बनाने के लिए। मैंने भी सेटअप किया स्थिति: निरपेक्ष; इसलिए हम स्वतंत्र रूप से इन सीमाओं को आंतरिक लिंक आइटम के चारों ओर ले जा सकते हैं। यह एक होवर राज्य पर सीमा के रंग को बदलने के लिए सुपर आसान है, जो एक अधिक गतिशील भावना प्रदान करता है। यह बहुत अविश्वसनीय है कि आप मूल HTML5 और CSS3 नियमों का उपयोग करके क्या पूरा कर सकते हैं.

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

jQuery के एनिमेटेड

इन कस्टम कोड को लिखने में मैंने एक नया दस्तावेज़ बनाया है जिसका नाम है script.js. सीधे इन में लिखने के लिए स्वतंत्र महसूस करें > टैग, या डेमो स्रोत कोड से मेरा उदाहरण डाउनलोड करें.

$ (दस्तावेज़)। पहले से ही (फ़ंक्शन () var पेजबॉडी = $ ("# पेजबॉडी"); थीम थिमेनु = $ ("# नेवमेनू"); वर टॉपबार = $ ("# टूलबारनव"); var सामग्री "$ (") # कंटेंट "); वर् व्यूपोर्ट = चौड़ाई: $ (विंडो)। रिचार्ज (), हाइट: $ (विंडो) .हाइट (); // वैरिएबल को // viewport.width / viewport.height के रूप में पुनः प्राप्त करें। 

function openme () $ (function () topbar.animate (बाएं: "290px", अवधि: 300, कतार: झूठी); पेजबॉडी.नाम (बाएं: "290px", अवधि: 300 , कतार: झूठी););  function stopeme () var closeme = $ (function () topbar.animate (बाएं: "0px", अवधि: 180, कतार: झूठी); पेजबॉडी.नाम (बाएं: 0px ", अवधि: 180, कतार: झूठी);); 

// लोडिंग पेज कंटेंट नेविगेशन के लिए $ ("a.navlink")। लाइव ("क्लिक", फंक्शन (e) e.preventDefault) (); var linkurl = $ (यह) .attr ("href"); var linkhtmlurl; = linkurl.substring (1, linkurl.length); var imgloader = ''; 

closeme (); $ (फ़ंक्शन () topbar.css ("टॉप", "0px"); window.scrollTo (0, 1););

content.html (imgloader); setTimeout (फ़ंक्शन () content.load (linkhtmlurl, function () / * no callback * /), 1200);