🚉 🔏 🌬️ JQuery मोबाइल का परिचय 🧚🏼 👎🏻 ☝🏿

JQuery मोबाइल का परिचय

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

मुख्य विशेषताएं

JQuery- आधारित परिचित वाक्यविन्यास
सभी प्रमुख मोबाइल प्लेटफार्मों के साथ संगत - iOS, Android, ब्लैकबेरी, पाम वेबओएस, नोकिया / सिम्बियन, विंडोज मोबाइल, बाडा, MeeGo और HTML को समझने वाले सभी उपकरणों के लिए बुनियादी समर्थन के साथ
छोटे फ़ाइल आकार (सभी मोबाइलों के लिए कार्यक्षमता सहित 12kb) और गति बढ़ाने के लिए न्यूनतम छवि निर्भरता
एचटीएमएल 5 मार्कअप पृष्ठ विन्यास और तेजी से स्क्रिप्ट विकास के लिए न्यूनतम आवश्यकताओं द्वारा संचालित है
एक प्रगतिशील दृष्टिकोण, सभी मोबाइल, इलेक्ट्रॉनिक पुस्तकों, डेस्कटॉप प्लेटफ़ॉर्म की मुख्य सामग्री और कार्यक्षमता को मजबूत करना, नए मोबाइल प्लेटफार्मों पर आसानी से उपयोग किया जाएगा।
एचटीएमएल मार्कअप में एचटीएमएल 5 तिथि-भूमिका विशेषताओं का उपयोग करके स्वचालित रूप से प्रारंभिककरण, पृष्ठ पर पाए जाने वाले सभी jQuery के मोबाइल विजेट को स्वचालित रूप से आरंभ करता है।
WAI-ARIA जैसे सक्रिय इंटरनेट अनुप्रयोगों के लिए सुलभता मानक सुविधाजनक स्क्रीन रीडिंग प्रदान करने के लिए शामिल हैं (जैसे IOS में VoiceOver) और अन्य सहायक प्रौद्योगिकियां।
टच, माउस, और अन्य प्रकार के इनपुट उपकरणों के समर्थन की प्रक्रिया को सरल बनाने वाला एक सरल एपीआई।
नए मॉड्यूल स्पर्श नियंत्रण की क्षमताओं का विस्तार करते हैं।
शक्तिशाली अनुप्रयोग विज़ुअलाइज़ेशन थीम बिल्डिंग इंटरफेस को बहुत आसान बनाती हैं।

समर्थित मंच

अभी भी त्रुटियों की एक उचित मात्रा है, लेकिन उन्हें जनवरी में संस्करण 1.0 से पहले तय किया जाएगा। अल्फा रिलीज स्टेज पर, jQuery के मोबाइल का निम्न उपकरणों पर परीक्षण किया गया:

Apple iOS: iPhone, iPod Touch, iPad (सभी संस्करण)
Android: सभी डिवाइस (सभी संस्करण)
ब्लैकबेरी मशाल (संस्करण 6)
पाम वेबओएस प्री, पिक्सी
नोकिया N900 (विकास में)

पेज

JQuery मोबाइल में AJAX का उपयोग करके स्वचालित पेज लोड करना शामिल है, जिसमें बैक बटन चालू है, एनीमेशन सेटिंग्स, और संवाद प्रदर्शित करने के लिए सरल उपकरण। इस मॉडल का लक्ष्य डेवलपर्स को सर्वोत्तम प्रथाओं का उपयोग करके वेबसाइट बनाने की अनुमति देना है - जहां नियमित लिंक बिना किसी विशेष कॉन्फ़िगरेशन के काम करेंगे, जबकि देशी एप्लिकेशन का निर्माण किया जा सकता है, जो मानक HTML का उपयोग करके हासिल नहीं किया जा सकता है।

मोबाइल पेज संरचना।

jQuery मोबाइल साइट को 'DOCTYPE' HTML5 के साथ शुरू करना चाहिए, ताकि फ्रेमवर्क की सुविधाओं का पूरी तरह से उपयोग किया जा सके। (पुराने डिवाइस और ब्राउज़र जो एचटीएमएल 5 को नहीं समझते हैं, सुरक्षित रूप से सिद्धांत और विभिन्न विशेष विशेषताओं की उपेक्षा करेंगे)। हेड हेडर में, jQuery, jQuery मोबाइल, मोबाइल सीएसएस थीम और अन्य आवश्यक घटकों के लिंक इंगित किए जाते हैं।

  <! DOCTYPE html> 
 <Html> 
	 <Head> 
	         <शीर्षक> पृष्ठ शीर्षक </ शीर्षक> 
		 <लिंक rel = "स्टाइलशीट" href = "http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
		 <script src = "http://code.jquery.com/jquery-1.4.3.min.js"> </ script>
		 <script src = "http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"> </ script>
	 </ Head> 
	 <Body> 

	 ...

	 </ Body>
 </ Html>

बॉडी टैग के अंदर, मोबाइल डिवाइस पर प्रत्येक दृश्य या पृष्ठ को एक तत्व (आमतौर पर एक div) द्वारा विशेषता डेटा-भूमिका = "पेज" के साथ पहचाना जाता है।

		
	 <Code>
         <div data-role = "page"> 
	 ...
	 </ Div>
         </ Code>

कंटेनर "पेज" के भीतर, किसी भी वैध HTML कोड का उपयोग किया जा सकता है, जहां "पेज" के तत्काल वंशज को "हेडर", "सामग्री" और "पाद" विशेषताओं के साथ ब्लॉक होना चाहिए।

		

         <div data-role = "page"> 
		 <div data-भूमिका = "शीर्ष लेख"> ... </ div> 
		 <div data-role = "content"> ... </ div> 
		 <div data-role = "footer"> ... </ div> 
	 </ Div>

समाप्त सरल पृष्ठ टेम्पलेट

सभी को एक साथ रखकर, एक मानक पृष्ठ को एक टेम्पलेट के साथ शुरू करना चाहिए:

		

 <! DOCTYPE html> 
 <Html> 
	 <Head> 
	 <शीर्षक> पृष्ठ शीर्षक </ शीर्षक> 
	 <लिंक rel = "स्टाइलशीट" href = "http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
	 <script src = "http://code.jquery.com/jquery-1.4.3.min.js"> </ script>
	 <script src = "http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"> </ script>
 </ Head> 
 <Body> 

         <div data-role = "page">

	         <div data-भूमिका = "शीर्ष लेख">
			 <h1> पृष्ठ का शीर्षक </ h1>
		 </ div> <! - / शीर्ष लेख ->

		 <div data-role = "content">	
			 <p> पृष्ठ सामग्री यहाँ जाती है। </ p>		
		 </ div> <! - / सामग्री ->

		 <div data-role = "footer">
			 <h4> पृष्ठ पाद </ h4>
		 </ div> <! - / शीर्ष लेख ->
	 </ div> <! - / पृष्ठ ->

	 </ Body>
 </ Html>

लिंक वाले बाहरी पृष्ठ

JQuery मोबाइल Ajax साइटों और अनुप्रयोगों को बनाने की प्रक्रिया को स्वचालित करता है। डिफ़ॉल्ट रूप से, जब आप किसी बाहरी पृष्ठ (उदाहरण के लिए, products.html) की ओर इशारा करते हुए लिंक पर क्लिक करते हैं, तो संरचना HREF लिंक को पार्स करती है, एक अजाक्स अनुरोध तैयार करती है और लोड प्रदर्शित करती है। यदि अजाक्स अनुरोध सफल होता है, तो DOM में नया पेज कंटेंट जोड़ा जाएगा, सभी मोबाइल विजेट अपने आप आरंभिक हो जाएंगे, और नया पेज प्रदर्शित हो जाएगा। यदि अजाक्स अनुरोध विफल हो गया, तो एक अलग परत में, एक त्रुटि संदेश प्रदर्शित किया जाएगा जो थोड़े समय के बाद गायब हो जाएगा, ताकि यह नेविगेशन स्ट्रीम को बाधित न करे।

पृष्ठ के भीतर लिंक

एक एकल HTML दस्तावेज़ में कई पृष्ठ हो सकते हैं, जो डेटा-भूमिका = "पृष्ठों" विशेषताओं के साथ कई div तत्वों को स्टैक करके लोड किए जाते हैं। प्रत्येक पृष्ठ में एक विशिष्ट पहचानकर्ता होना चाहिए जो कि HREF = "# Foo" का उपयोग करके इनडोर इकाइयों के बीच संचार करने के लिए उपयोग किया जाएगा। जब आप लिंक पर क्लिक करते हैं, तो यह वांछित आईडी के साथ आंतरिक पृष्ठ (पेज) की खोज करेगा और स्क्रीन पर इस ब्लॉक को प्रदर्शित करेगा। यह ध्यान रखना महत्वपूर्ण है कि यदि आप एक पृष्ठ को लिंक करते हैं जो अजाक्स के माध्यम से कई आंतरिक पृष्ठों के साथ एक पृष्ठ पर लोड किया गया है, तो आपको लिंक में REL = "बाहरी" जोड़ना होगा। यह पृष्ठ को पूरी तरह से लोड करने और URL में हैश को खाली करने की रूपरेखा बताता है। यह महत्वपूर्ण है क्योंकि अजाक्स पृष्ठ इतिहास को ट्रैक करने के लिए लैटिस (#) का उपयोग करते हैं, और इन-पेज लिंक अपने पृष्ठों के अंदर हैश का उपयोग करते हैं, इससे संघर्ष हो सकता है। उदाहरण के लिए, कई आंतरिक पृष्ठों वाले पृष्ठ का लिंक इस तरह दिखेगा:

		
	 <a href="multipage.html" rel="external"> बहु-पृष्ठ लिंक </a>

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

		

 <Body> 

	 <! - पहले पृष्ठ की शुरुआत ->
	 <div data-role = "page" id = "foo">

		 <div data-भूमिका = "शीर्ष लेख">
			 <h1> फू </ h1>
		 </ div> <! - / शीर्ष लेख ->

		 <div data-role = "content">	
			 <p> मैं स्रोत क्रम में पहले हूं इसलिए मुझे पृष्ठ के रूप में दिखाया गया है। </ p>		
			 <p> आंतरिक पृष्ठ देखें जिसे <a href="#bar"> बार </a> </ p> कहा जाता है	
		 </ div> <! - / सामग्री ->

		 <div data-role = "footer">
			 <h4> पृष्ठ पाद </ h4>
		 </ div> <! - / शीर्ष लेख ->
	 </ div> <! - / पृष्ठ ->

	 <! - दूसरे पृष्ठ की शुरुआत ->
	 <div data-role = "page" id = "bar">

		 <div data-भूमिका = "शीर्ष लेख">
			 <h1> बार </ h1>
		 </ div> <! - / शीर्ष लेख ->

		 <div data-role = "content">	
			 <p> मैं स्रोत क्रम में पहले हूं इसलिए मुझे पृष्ठ के रूप में दिखाया गया है। </ p>		
			 <p> <a href="#foo"> foo पर वापस </a> </ p>	
		 </ div> <! - / सामग्री ->

		 <div data-role = "footer">
			 <h4> पृष्ठ पाद </ h4>
		 </ div> <! - / शीर्ष लेख ->
	 </ div> <! - / पृष्ठ ->
 </ Body>

कृपया ध्यान दें: चूंकि हम सभी पृष्ठों के इतिहास को ट्रैक करने के लिए हैश नेविगेशन का उपयोग करते हैं, इसलिए वर्तमान में लंगर लिंक (index.html # Foo) को लागू करना संभव नहीं है। स्रोत http://jquerymobile.com/demos/1.0a2/

JQuery मोबाइल का परिचय

JQuery मोबाइल का परिचय

मुख्य विशेषताएं

समर्थित मंच

पेज

मोबाइल पेज संरचना।

समाप्त सरल पृष्ठ टेम्पलेट

लिंक वाले बाहरी पृष्ठ

पृष्ठ के भीतर लिंक

More articles: