jQuery मोबाइल के साथ एक मोबाइल वेबसाइट बनाएं

विषय

• 01. एक HTML फ़ाइल में एकाधिक पृष्ठों को कैसे कोडित करें?
• 02. डायलॉग बॉक्स और ट्रांज़िशन का उपयोग कैसे करें
• 03. संक्रमण जिनका उपयोग किया जा सकता है
• 04. बटन कैसे बनाएं
• 05. नेविगेशन बार कैसे बनाएं
• 06. नेविगेशन बार के लिए HTML को कैसे कोड करें:
• 07. jQuery मोबाइल के साथ सामग्री को कैसे प्रारूपित करें
• 08. डिफ़ॉल्ट शैलियाँ जो jQuery मोबाइल उपयोग करती हैं
• 09. HTML तत्वों पर थीम कैसे लागू करें
• 10. थीम लागू करने के दो तरीके:
• 11. परिप्रेक्ष्य
• ये पसंद आया? ये पढ़ सकते हैं!

• ज्ञान की जरूरत: HTML5 की शुरुआत, मध्यवर्ती CSS, jQuery और jQuery मोबाइल
• आवश्यकता है: jQuery और jQuery मोबाइल लाइब्रेरी और एक टेक्स्ट एडिटर
• परियोजना का समय: 4-6 घंटे
• समर्थन फ़ाइल

यह अध्याय १५ का संपादित अंश है मुराच का HTML5 और CSS3 ज़क रुवलकाबा और ऐनी बोहेम द्वारा।

jQuery मोबाइल एक फ्री, ओपन-सोर्स, क्रॉस-प्लेटफॉर्म, जावास्क्रिप्ट लाइब्रेरी है जिसका उपयोग आप मोबाइल वेबसाइट विकसित करने के लिए कर सकते हैं। यह लाइब्रेरी आपको ऐसे पेज बनाने देती है जो किसी देशी मोबाइल एप्लिकेशन के पेजों की तरह दिखते और महसूस करते हैं।

यद्यपि jQuery मोबाइल वर्तमान में बीटा परीक्षण संस्करण के रूप में उपलब्ध है, यह संस्करण पहले से ही वे सभी सुविधाएँ प्रदान करता है जिनकी आपको एक उत्कृष्ट मोबाइल वेबसाइट विकसित करने के लिए आवश्यकता होती है। नतीजतन, आप इसका उपयोग तुरंत शुरू कर सकते हैं। आप यह भी उम्मीद कर सकते हैं कि इस संस्करण को लगातार बढ़ाया जाएगा, इसलिए jQuery मोबाइल केवल बेहतर होगा।

इस लेख में आप मोबाइल वेबसाइट के पेज बनाने की बुनियादी तकनीकों के बारे में जानेंगे। इसमें डायलॉग बॉक्स, बटन और नेविगेशन बार का इस्तेमाल शामिल होगा।

• हमारे सभी वेब डिज़ाइन लेख यहाँ पढ़ें

01. एक HTML फ़ाइल में एकाधिक पृष्ठों को कैसे कोडित करें?

जिस तरह से आप स्क्रीन वेब साइट के लिए वेब पेज विकसित करते हैं, उसके विपरीत, jQuery मोबाइल आपको एक HTML फ़ाइल में कई पेज बनाने की सुविधा देता है। इसे चित्र 15-7 द्वारा दर्शाया गया है। यहां, आप इन पृष्ठों के लिए HTML के साथ एक साइट के दो पृष्ठ देख सकते हैं। आश्चर्य की बात यह है कि दोनों पृष्ठ एक ही HTML फ़ाइल में कोडित हैं।

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

HTML फ़ाइल में पृष्ठों के बीच लिंक करने के लिए, आप प्लेसहोल्डर का उपयोग करते हैं जैसा कि अध्याय 7 के चित्र 7-11 में दिखाया गया है। उदाहरण के लिए, इस उदाहरण के पहले पृष्ठ में a> तत्व "#toobin" पर जाता है, जब उपयोगकर्ता टैप करता है h2 या img तत्व जो इस लिंक की सामग्री के रूप में कोडित है। यह div तत्व को "toobin" के साथ इसकी आईडी विशेषता के रूप में संदर्भित करता है, जिसका अर्थ है कि लिंक को टैप करने से पाठक फ़ाइल में दूसरे पृष्ठ पर पहुंच जाता है।

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

एक HTML फ़ाइल के मुख्य भाग में दो पृष्ठों के लिए HTML:

div डेटा-भूमिका = "पृष्ठ">
हैडर डेटा-रोल = "हेडर">एच1>एसजेवी टाउन हॉल/एच1>/हेडर>
अनुभाग डेटा-भूमिका = "सामग्री">
h3>2011-2012 के स्पीकर/h3>
a href="#toobin">
h4>जेफरी टूबिनब्र>अक्टूबर 19, 2011/h4>
img src="images/toobin75.webp" alt="जेफरी टूबिन">/a>
!-- बाकी वक्ताओं के लिए तत्व -->
/अनुभाग>
पाद डेटा-भूमिका = "पाद लेख">h4>© 2011/h4>/पाद लेख>
/div>
डिव डेटा-रोल = "पेज" आईडी = "टूबिन">
हैडर डेटा-रोल = "हेडर">एच1>एसजेवी टाउन हॉल/एच1>/हेडर>
अनुभाग डेटा-भूमिका = "सामग्री">
h3>द सुप्रीम नाइन:br>ब्लैक रोबेड सीक्रेट्स/h3>
img src="images/toobin_court.cnn.webp" alt="जेफरी टूबिन">
p> समीक्षकों द्वारा प्रशंसित सर्वश्रेष्ठ विक्रेता के लेखक, i>द नाइन:
!-- कॉपी जारी है -->
/अनुभाग>
पाद डेटा-भूमिका = "पाद लेख">h4>© 2011/h4>/पाद लेख>
/div>

विवरण

• जब आप jQuery मोबाइल का उपयोग करते हैं, तो आपको प्रत्येक पृष्ठ के लिए एक अलग HTML फ़ाइल विकसित करने की आवश्यकता नहीं होती है। इसके बजाय, एक एकल HTML फ़ाइल के मुख्य भाग के भीतर, आप प्रत्येक पृष्ठ के लिए एक div तत्व को उसकी डेटा-भूमिका विशेषता के साथ "पृष्ठ" पर सेट करते हैं।
• प्रत्येक div तत्व के लिए, आप id विशेषता को प्लेसहोल्डर मान पर सेट करते हैं जिसे अन्य पृष्ठों के a> तत्वों में href विशेषताओं द्वारा एक्सेस किया जा सकता है।

02. डायलॉग बॉक्स और ट्रांज़िशन का उपयोग कैसे करें

चित्र 15-8 दिखाता है कि एक डायलॉग बॉक्स कैसे बनाया जाता है जो किसी लिंक को टैप करने पर खुलता है। ऐसा करने के लिए, आप डायलॉग बॉक्स को वैसे ही कोड करते हैं जैसे आप किसी भी पेज पर करते हैं। लेकिन उस पृष्ठ पर जाने वाले a> तत्व में, आप डेटा-रिले विशेषता को "संवाद" के साथ इसके मान के रूप में कोड करते हैं।

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

जब आप किसी अन्य पृष्ठ या संवाद बॉक्स में जाने वाले a> तत्व को कोड करते हैं, तो आप इस आंकड़े में तालिका में संक्षेपित छह संक्रमणों में से एक को निर्दिष्ट करने के लिए डेटा-संक्रमण विशेषता का भी उपयोग कर सकते हैं। इनमें से प्रत्येक संक्रमण एक ऐसे प्रभाव की नकल करने के लिए है जो एक iPhone जैसे मोबाइल डिवाइस का उपयोग करता है।

03. संक्रमण जिनका उपयोग किया जा सकता है

HTML जो "पॉप" संक्रमण के साथ एक संवाद बॉक्स के रूप में पृष्ठ खोलता है:

a href="#toobin" data-rel="dialog" data-transition="pop">

HTML जो "फीका" संक्रमण के साथ पृष्ठ खोलता है:

a href="#toobin" data-transition="fade">

विवरण

• HTML के लिए a HTML संवाद बॉक्स जिस तरह से किसी पेज को कोडित किया जाता है उसी तरह कोडित किया जाता है। हालांकि, पृष्ठ से लिंक करने वाले a> तत्व में डेटा-रिले विशेषता "संवाद" के साथ इसके मूल्य के रूप में शामिल है। डायलॉग बॉक्स को बंद करने के लिए यूजर बॉक्स के हेडर में X को टैप करता है।
• किसी पृष्ठ या संवाद बॉक्स को खोलने का तरीका निर्दिष्ट करने के लिए, आप ऊपर दी गई तालिका में किसी एक मान के साथ डेटा-संक्रमण विशेषता का उपयोग कर सकते हैं। यदि कोई उपकरण आपके द्वारा निर्दिष्ट ट्रांज़िशन का समर्थन नहीं करता है, तो विशेषता को अनदेखा कर दिया जाता है।
• डायलॉग बॉक्स की स्टाइलिंग jQuery मोबाइल CSS फ़ाइल द्वारा की जाती है।

04. बटन कैसे बनाएं

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

यदि आप एक बटन में jQuery मोबाइल द्वारा प्रदान किए गए 18 आइकनों में से एक जोड़ना चाहते हैं, तो आप डेटा-आइकन विशेषता को भी कोडित करते हैं। उदाहरण के लिए, इस उदाहरण में तीसरा बटन "डिलीट" आइकन का उपयोग करता है, और चौथा बटन "होम" आइकन का उपयोग करता है। ये सभी आइकॉन उन आइकॉन की तरह दिखते हैं जिन्हें आप किसी नेटिव मोबाइल एप्लिकेशन में देख सकते हैं। संयोग से, ये आइकन अलग-अलग फाइलें नहीं हैं जिन्हें पेज को एक्सेस करना चाहिए। इसके बजाय, वे jQuery मोबाइल लाइब्रेरी द्वारा प्रदान किए जाते हैं।

यदि आप क्षैतिज रूप से दो या दो से अधिक बटनों को समूहित करना चाहते हैं, जैसे कि इस आंकड़े में हां, नहीं, और शायद बटन, तो आप एक div तत्व के भीतर बटन के लिए a> तत्वों को कोड कर सकते हैं जिसमें "कंट्रोलग्रुप" इसकी डेटा-भूमिका विशेषता के रूप में है और "क्षैतिज" इसकी डेटा-प्रकार विशेषता के रूप में। या, बटनों को लंबवत रूप से समूहित करने के लिए, आप डेटा-प्रकार विशेषता को "ऊर्ध्वाधर" में बदल सकते हैं।

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

अंतिम दो बटन दिखाते हैं कि किसी पृष्ठ के पाद लेख में बटन कैसे दिखाई देते हैं। यहां, आइकन और टेक्स्ट काले रंग की पृष्ठभूमि के खिलाफ सफेद हैं। इस मामले में, पाद लेख के लिए वर्ग विशेषता "ui-bar" पर सेट है, जो jQuery मोबाइल को बताता है कि उसे पाद लेख की सामग्री के आसपास थोड़ा और स्थान रखना चाहिए। आप इसके बारे में चित्र 15-12 में और जानेंगे।

अनुभाग में बटनों के लिए HTML:

!-- इनलाइन बटन के लिए, डेटा-लाइन विशेषता को सही पर सेट करें ->
a href="#" data-role="button" data-inline="true">Cancel/a>
a href="#" data-role="button" data-inline="true">OK/a>
!-- एक बटन में एक आइकन जोड़ने के लिए, डेटा-आइकन विशेषता का उपयोग करें ->
a href="#" data-role="button" data-icon="delete">Delete/a>
a href="#" data-role="button" data-icon="home">Home/a>
!-- बटनों को समूहीकृत करने के लिए, निम्नलिखित विशेषताओं वाले एक div तत्व का उपयोग करें -->
div डेटा-भूमिका = "नियंत्रण समूह" डेटा-प्रकार = "क्षैतिज">
a href="#" data-role="button" data-icon="check">Yes/a>
a href="#" data-role="button" data-icon="arrow-d">No/a>
a href="#" data-role="button">शायद/a>
/div>
!-- बैक बटन को कोड करने के लिए, डेटा-रिल एट्रिब्यूट को बैक पर सेट करें ->
a href="#" data-role="button" dat-rel="back" data-icon="back">
पिछले पृष्ठ पर वापस/a>

पाद लेख में बटनों के लिए HTML:

पाद लेख डेटा-भूमिका = "पाद लेख" >
a href="http://www.facebook.com" data-role="button"
data-icon="plus">Facebook में जोड़ें/a>
a href="http://www.twitter.com" data-role="button"
data-icon="plus">इस पेज को ट्वीट करें/a>
/पाद लेख>

विवरण

• किसी वेब पेज में एक बटन जोड़ने के लिए, आप एक a> तत्व को कोड करते हैं, जिसकी डेटा-भूमिका विशेषता "बटन" पर सेट होती है।

05. नेविगेशन बार कैसे बनाएं

चित्र 15-10 दिखाता है कि आप वेब पेज पर नेविगेशन बार कैसे जोड़ सकते हैं। ऐसा करने के लिए, आप एक div तत्व को उसकी डेटा-भूमिका के साथ "नेवबार" पर सेट करते हैं। इस तत्व के भीतर, आप एक उल तत्व को कोड करते हैं जिसमें li तत्व होते हैं जिसमें नेविगेशन बार में आइटम के लिए a> तत्व होते हैं। हालांकि, ध्यान दें कि आप a> तत्वों के लिए डेटा-भूमिका विशेषता को कोड नहीं करते हैं।

नेविगेशन बार में आइटम के लिए रंग बदलने के लिए, इस उदाहरण में कोड में प्रत्येक आइटम के लिए डेटा-थीम-बी विशेषता शामिल है। नतीजतन, jQuery मोबाइल प्रत्येक आइटम की पृष्ठभूमि का रंग काले से बदल देता है, जो कि डिफ़ॉल्ट है, एक आकर्षक नीले रंग में। इसके अलावा, यह कोड सक्रिय बटन के लिए वर्ग विशेषता को "ui-btn-active" पर सेट करता है, इसलिए jQuery मोबाइल सक्रिय बटन के रंग को हल्के नीले रंग में बदल देता है। यह दिखाता है कि आप jQuery मोबाइल द्वारा उपयोग किए जाने वाले स्वरूपण को कैसे बदल सकते हैं, और आप इसके बारे में आगे जानेंगे।

नेविगेशन बार के लिए HTML

हेडर डेटा-रोल = "हेडर">
एच1>एसजेवी टाउन हॉल/एच1>
div डेटा-भूमिका = "नेवबार">
उल>
ली>ए href="#होम"
डेटा-आइकन = "होम" डेटा-थीम = "बी">होम/ए>/ली>
ली>a href="#speakers"
data-icon="star" data-theme="b">Speakers/a>/li>
ली>a href="#contactus
data-icon="grid" data-theme="b">हमसे संपर्क करें/a>/li>
/उल>
/div>
/शीर्षक>

06. नेविगेशन बार के लिए HTML को कैसे कोड करें:

• शीर्षलेख तत्व के भीतर एक div तत्व को कोड करें। फिर, डिव एलिमेंट के लिए डेटा-रोल एट्रिब्यूट को "नेवबार" पर सेट करें।
• Div तत्व के भीतर, एक ul तत्व को कोड करें जिसमें प्रत्येक लिंक के लिए एक li तत्व हो।
• प्रत्येक li तत्व के भीतर, a> तत्व को एक href विशेषता के साथ कोड करें जो उस पृष्ठ के लिए प्लेसहोल्डर का उपयोग करता है जिस पर लिंक जाना चाहिए। फिर, डेटा-आइकन विशेषता को अपनी पसंद के आइकन पर सेट करें।
• नेविगेशन बार में सक्रिय आइटम के लिए, वर्ग विशेषता को "ui-btn-active" पर सेट करें। फिर, इस आइटम का रंग नेविगेशन बार में अन्य आइटम की तुलना में हल्का होगा।
• नेविगेशन बार में प्रत्येक आइटम पर jQuery मोबाइल थीम लागू करने के लिए आपको डेटा-थीम विशेषता का भी उपयोग करना चाहिए। अन्यथा, बार के बटन शेष शीर्षलेख के समान रंग के होंगे। थीम लागू करने के बारे में अधिक जानने के लिए, चित्र 15-12 देखें।

07. jQuery मोबाइल के साथ सामग्री को कैसे प्रारूपित करें

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

08. डिफ़ॉल्ट शैलियाँ जो jQuery मोबाइल उपयोग करती हैं

चित्र 15-13 डिफ़ॉल्ट शैलियों को दिखाता है जो jQuery मोबाइल सामान्य HTML तत्वों के लिए उपयोग करता है। इसकी सभी शैलियों के लिए, jQuery मोबाइल ब्राउज़र के रेंडरिंग इंजन पर निर्भर करता है, इसलिए इसकी अपनी स्टाइल न्यूनतम है। यह लोड समय को तेज रखता है और उस ओवरहेड को कम करता है जो अत्यधिक CSS एक पृष्ठ पर लगाएगा।

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

विवरण

• डिफ़ॉल्ट रूप से, jQuery मोबाइल स्वचालित रूप से किसी पृष्ठ के HTML तत्वों पर शैलियों को लागू करता है। ये शैलियाँ न केवल आकर्षक हैं, बल्कि ब्राउज़र की मूल शैलियों की नकल भी करती हैं।
• डिफ़ॉल्ट रूप से, jQuery मोबाइल प्रत्येक मोबाइल पृष्ठ के बाएँ, दाएँ, ऊपर और नीचे पैडिंग की एक छोटी मात्रा लागू करता है।
• डिफ़ॉल्ट रूप से, लिंक सामान्य टेक्स्ट से थोड़े बड़े होते हैं। इससे उपयोगकर्ता के लिए लिंक्स को टैप करना आसान हो जाता है।
• डिफ़ॉल्ट रूप से, लिंक को फ़ॉन्ट रंग के रूप में नीले रंग से रेखांकित किया जाता है।

09. HTML तत्वों पर थीम कैसे लागू करें

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

थीम लागू करने का एक तरीका डेटा-थीम विशेषता को थीम अक्षर के साथ उसके मूल्य के रूप में कोड करना है। आपने इसे चित्र 15-10 में नेविगेशन बार में देखा, और आप इसे इस चित्र में दूसरे नेविगेशन बार के कोड में देख सकते हैं। यहां, डेटा-थीम विशेषता शीर्षलेख पर थीम "ई" और नेविगेशन बार में आइटम के लिए थीम "डी" लागू करती है।

विषयों को लागू करने का दूसरा तरीका एक तत्व के लिए वर्ग विशेषता को एक वर्ग नाम पर सेट करना है जो एक विषय को इंगित करता है। यह तालिका के बाद पहले उदाहरण द्वारा सचित्र है। यहां, वर्ग विशेषता का उपयोग "ui-bar" और "ui-bar-b" दोनों वर्गों को div तत्व पर लागू करने के लिए किया जाता है। नतीजतन, jQuery मोबाइल पहले तत्व के लिए एक बार के लिए अपनी डिफ़ॉल्ट स्टाइल लागू करता है और फिर उस स्टाइल के लिए बी थीम लागू करता है। आने वाले पृष्ठों में, आप इस प्रकार की शैली के अन्य उदाहरण देखेंगे।

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

सामान्य तौर पर, डिफ़ॉल्ट शैलियों और पहले तीन विषयों के साथ रहना सबसे अच्छा है, जो आमतौर पर एक साथ अच्छी तरह से काम करते हैं। फिर, आप विषयों d और e के साथ प्रयोग कर सकते हैं जब आपको लगता है कि आपको कुछ और चाहिए।

दूसरे हेडर और नेविगेशन बार के लिए HTML:

हेडर डेटा-रोल = "हेडर" डेटा-थीम = "ई">
एच1>एसजेवी टाउन हॉल/एच1>
div डेटा-भूमिका = "नेवबार">
उल>
li>a href="#home" data-icon="home"
डेटा-थीम = "डी">होम/ए>/ली>
li>a href="#speakers" data-icon="star"
डेटा-थीम = "डी" >स्पीकर/ए>/ली>
li>a href="#news" id="news" data-icon="grid"
डेटा-थीम = "डी">समाचार/ए>/ली>
/उल>
/div>
/शीर्षक>

पांच jQuery मोबाइल थीम:

10. थीम लागू करने के दो तरीके:

डेटा-थीम विशेषता का उपयोग करके:

ली>ए href="#होम"
डेटा-आइकन = "होम" डेटा-थीम = "बी">होम/ए>/ली>

एक वर्ग विशेषता का उपयोग करके जो विषय को इंगित करता है:

डिव >बार/डिव>

विवरण

• jQuery मोबाइल में शामिल पांच थीम का उपयोग करके, आप HTML तत्वों के लिए डिफ़ॉल्ट शैलियों में उपयुक्त समायोजन कर सकते हैं।
• यद्यपि आप jQuery मोबाइल एप्लिकेशन के साथ अपनी स्वयं की CSS स्टाइल शीट का उपयोग कर सकते हैं, आपको जब भी संभव हो ऐसा करने से बचना चाहिए।

11. परिप्रेक्ष्य

पिछले कुछ वर्षों में मोबाइल उपकरणों का उपयोग नाटकीय रूप से बढ़ा है। उसके कारण, इन उपकरणों से उपयोग में आसान वेब साइटों को डिज़ाइन करना महत्वपूर्ण हो गया है। हालांकि इसका आमतौर पर एक अलग वेब साइट विकसित करने का मतलब है, यह इंटरनेट पर आपकी उपस्थिति बनाए रखने का एक महत्वपूर्ण पहलू हो सकता है।

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

ये पसंद आया? ये पढ़ सकते हैं!

• ऐप कैसे बनाएं
• मोबाइल वेबसाइट बनाने के लिए प्रो टिप्स।
• डिजाइनरों के लिए सर्वश्रेष्ठ मुफ्त वेब फोंट
• उपयोगी और प्रेरक उड़ता टेम्पलेट