jQuery Mobile लिस्ट व्यू

jQuery Mobile लिस्ट व्यू

jQuery Mobile में लिस्ट व्यू हैं स्टैंडर्ड HTML लिस्ट: अनुक्रमित सूची (<ol>) और अनुक्रमित नहीं होने वाली सूची (<ul>)。

लिस्ट बनाने के लिए, <ol> या <ul> एलेमेंट पर data-role="listview" जोड़ें। यदि आप इन आइटम को क्लिक करने योग्य बनाना चाहते हैं, तो प्रत्येक लिस्ट आइटम (<li>) में लिंक निर्धारित करें:

उदाहरण

<ol data-role="listview">
  <li><a href="#">लिस्ट आइटम</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">लिस्ट आइटम</a></li>
</ul>

अपने आप प्रयोग करें

अगर आप लिस्ट को गोलाकार और माउंटनेंस जोड़ना चाहते हैं, तो data-inset="true" एट्रिब्यूट का उपयोग करें:

उदाहरण

<ul data-role="listview" data-inset="true">

अपने आप प्रयोग करें

सूचना:मूवबना, लिस्ट में आइटम स्वचालित रूप से बटन में बदल जाते है (data-role="button" नहीं आवश्यक)。

लिस्ट विभाजक

लिस्ट विभाजक (List Dividers) से आइटम को श्रेणी/खंड के रूप में संगठित और समग्र किया जाता है。

अगर आप लिस्ट में विभाजक निर्धारित करना चाहते हैं, तो <li> एलेमेंट पर data-role="list-divider" एट्रिब्यूट जोड़ें:

उदाहरण

<ul data-role="listview">
 <li data-role="list-divider">यूरोप</li>
  <li><a href="#">फ्रांस</a></li>
  <li><a href="#">जर्मनी</a></li>
</ul>

अपने आप प्रयोग करें

अगर आपकी सूची अक्षर रूप से क्रमबद्ध है (जैसे कॉम्यूनिकेशन लिस्ट), jQuery Mobile स्वचालित रूप से उचित विभाजक जोड़ता है, <ol> या <ul> एलेमेंट पर data-autodividers="true" एट्रिब्यूट सेट करके:

उदाहरण

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

अपने आप प्रयोग करें

सूचना:data-autodividers="true" एट्रिब्यूट से सूची आइटम टेक्स्ट के पहले अक्षर को बड़ा करके विभाजक बनाता है。

सर्च फिल्टर

अगर आप लिस्ट में सर्च बॉक्स जोड़ना चाहते हैं, तो data-filter="true" एट्रिब्यूट का उपयोग करें:

उदाहरण

<ul data-role="listview" data-filter="true"</ul>

अपने आप प्रयोग करें

मूवबना, सर्च बॉक्स में टेक्स्ट "Filter items..." है।

मूलभूत टेक्स्ट को संशोधित करने के लिए data-filter-placeholder अट्रिब्यूट का उपयोग करें:}}

उदाहरण

<ul data-role="listview" data-filter="true" data-filter-placeholder="अनुसूचक नाम खोजें">

अपने आप प्रयोग करें

अधिक उदाहरण

रद्द सूची
लिंक वाली सूची कैसे बनाएं (बटन नहीं, टिप्पणी नहीं, क्लिक नहीं करना)。