जक्वेरी मोबाइल पृष्ठ

jQuery Mobile से प्रारंभ करें

सूचना:यद्यपि jQuery Mobile सभी मोबाइल डिवाइसों के लिए उपयोगी है, यह टैबलेट पर अभी भी समर्थन समस्याएँ हो सकती है (CSS3 के सीमित समर्थन के कारण)。

इसलिए इस ट्यूटोरियल में, हम आपको गूगल के Chrome ब्राउज़र का उपयोग करने की सिफारिश करते हैं, ताकि आपको सर्वश्रेष्ठ पठन अनुभव मिले।

उदाहरण

<body>
<div data-role="page">
  <div data-role="header">
    <h1>मेरे गृह पृष्ठ को स्वागत करें</h1>
  </div>
  <div data-role="content">
    <p>मैं एक मोबाइल डेवलपर हूँ!</p>
  </div>
  <div data-role="footer">
    <h1>पादटीका टेक्स्ट</h1>
  </div>
</div>
</body>

स्वयं प्रयोग करें

उदाहरण व्याख्या:

  • data-role="page" ब्राउज़र में दिखाई देने वाला पृष्ठ है
  • data-role="header" पृष्ठ के ऊपरी टूलबार (सामान्यतया शीर्षक और खोज बटन) का निर्माण करता है
  • data-role="content" पृष्ठ के सामग्री को परिभाषित करता है, जैसे टेक्स्ट, इमेज, फॉर्म और बटन आदि
  • data-role="footer" पृष्ठ के निचले टूलबार का निर्माण करता है

इन कंटेनरों में, आप किसी भी HTML एलीमेंट जोड़ सकते हैं - पैराग्राफ, इमेज, शीर्षक, सूची आदि。

सूचना:HTML5 data-* एट्रिब्यूट jQuery Mobile के द्वारा मोबाइल डिवाइस के लिए "स्पर्श अनुकूल" इंटरैक्टिव आपरेशन का निर्माण करने के लिए उपयोग किए जाते हैं。

jQuery Mobile में पृष्ठ जोड़ना

jQuery Mobile में, आप एक ही HTML फ़ाइल में कई पृष्ठ बना सकते हैं。

प्रत्येक पृष्ठ को अलग-अलग आइड से अलग करें और href एट्रिब्यूट का उपयोग करके एक-दूसरे से जोड़ें:

उदाहरण

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">पृष्ठ दो को जाएं</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">पृष्ठ एक को जाएं</a>
  </div>
</div>

स्वयं प्रयोग करें

टिप्पणी:बहुत सारा सामग्री वाले web अनुप्रयोग (जैसे टेक्स्ट, लिंक, इमेज और स्क्रिप्ट आदि) लोड समय को प्रभावित कर सकते हैं। अगर आप आंतरिक लिंक पृष्ठ पर नहीं चाहते, तो बाहरी फ़ाइल का उपयोग करें:

<a href="externalfile.html">बाहरी पृष्ठ को जाएं</a>

पृष्ठ को डायलॉग के रूप में उपयोग करें

डायलॉग, सूचना दिखाने या इनपुट की अनुरोध करने के लिए विन्डो प्रकार के हैं。

यदि आप इस लिंक पर टिप्पणी करने पर एक डायलॉग बनाना चाहते हैं (हल्की टिप्पणी), तो इस लिंक को data-rel="dialog" जोड़ें:

उदाहरण

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">पृष्ठ दो को जाएं</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">पृष्ठ एक को जाएं</a>
  </div>
</div>

स्वयं प्रयोग करें