jQuery Mobile लिस्ट कंटेंट

jQuery Mobile सूची लघुचित्र

16x16px से बड़े चित्रों के लिए, लिंक में <img> एलीमेंट जोड़ें。

jQuery Mobile आटोमैटिक रूप से छोटे चित्र को 80x80px तक समायोजित करेगा:

उदाहरण

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

अपने आप प्रयास करें

सूचना वाली सूची भरने के लिए मानक HTML का उपयोग करें:

उदाहरण

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome मुफ्त ओएस वेब ब्राउज़र। 2008 में जारी किया गया।</p>
    </a>
  </li>
</ul>

अपने आप प्रयास करें

jQuery Mobile सूची आइकन

अपनी सूची में 16x16px के आइकन जोड़ने के लिए, <img> एलीमेंट को class="ui-li-icon" विशेषता जोड़ें:

उदाहरण

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

अपने आप प्रयास करें

विभाजित बटन

ऊर्ध्वगामी विभाजक वाली विभाजित सूची बनाने के लिए, <li> एलीमेंट के अंदर दो लिंक रखें。

jQuery Mobile आटोमैटिक रूप से दूसरे लिंक को नीले बाले प्रतीक का शैली जोड़ेगा, लिंक में (यदि) टेक्स्ट उपयोगकर्ता इस प्रतीक पर रखने पर दिखायेगा:

उदाहरण

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">कुछ टेक्स्ट</a>
  </li>
</ul>

अपने आप प्रयास करें

पृष्ठ और डायलॉग जोड़कर, लिंक की क्षमता बढ़ाई जा सकती है:

उदाहरण

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">ब्राउज़र डाउनलोड करें</a>
  </li>
</ul>

अपने आप प्रयास करें

गणना बुफर

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

गणना बुफर जोड़ने के लिए, इनलाइन एलीमेंट का उपयोग करें, जैसे <span> को, class "ui-li-count" विशेषता सेट करें और संख्या जोड़ें:

उदाहरण

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

अपने आप प्रयास करें

टिप्पणी:अंकड़े बब के अंदर सही संख्या दिखाने के लिए कार्यक्रमीय अद्यतन करना आवश्यक है।हम अगले चैप्टर में इसका वर्णन करेंगे।

अधिक उदाहरण

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