jQuery Mobile कॉलेप्सिबल

कोण्टोलैबल सामग्री ब्लॉक

कोण्टोलैबल (Collapsibles) आपको सामग्री को छुपाने या दिखाने की अनुमति देते हैं - एक भाग सूचना को संग्रह करने के लिए काफी उपयोगी हैं。

कोण्टोलैबल सामग्री ब्लॉक बनाने के लिए किसी कंटेनर को data-role="collapsible" अटिबाध दें। कंटेनर (div) में एक शीर्षक एलीमेंट (h1-h6) जिसके बाद आप खोलना चाहते हैं कोई भी HTML टैग जोड़ें:

उदाहरण

<div data-role="collapsible">
  <h1>मुझे क्लिक करें - मैं टुकड़ा हो सकता हूँ!</h1>
  <p>मैं कोण्टोलैबल सामग्री हूँ。</p>
</div>

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

डिफ़ॉल्ट रूप से यह सामग्री बंद है। यदि आप पृष्ठ लोड होने पर सामग्री खोलना चाहते हैं तो data-collapsed="false" का उपयोग करें:

उदाहरण

<div data-role="collapsible" data-collapsed="false">
  <h1>मुझे क्लिक करें - मैं टुकड़ा हो सकता हूँ!</h1>
  <p>अभी मैं डिफ़ॉल्ट में खुला हूँ。</p>
</div>

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

निचोड़ किए गए कोण्टोलैबल ब्लॉक

कोण्टोलैबल सामग्री ब्लॉक को निचोड़ कर सकते हैं:

उदाहरण

<div data-role="collapsible">
  <h1>मुझे क्लिक करें - मैं टुकड़ा हो सकता हूँ!</h1>
  <p>मैं खुला सामग्री हूँ。</p>
  <div data-role="collapsible">
    <h1>मुझे क्लिक करें - मैं निचोड़ किए गए कोण्टोलैबल ब्लॉक हूँ!</h1>
    <p>मैं निचोड़ किए गए कोण्टोलैबल ब्लॉक में खुला सामग्री हूँ。</p>
  </div>
</div>

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

टिप्पणी:कोण्टोलैबल सामग्री ब्लॉक को आप चाहते हैं तो कितनी भी बार निर्धारित निचोड़ कर सकते हैं。

कोण्टोलैबल सेट

कोण्टोलैबल सेट (Collapsible sets) एक साथ संयोजित किए गए कोण्टोलैबल ब्लॉक (अक्सर हाव-हाव कहलाते हैं) को कहते हैं। जब नया ब्लॉक खुला होता है तो सभी अन्य ब्लॉक बंद हो जाते हैं。

कुछ सामग्री ब्लॉक बनाएं और फिर data-role="collapsible-set" के द्वारा इस कोण्टोलैबल ब्लॉक को नए कंटेनर में पैक करें:

उदाहरण

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>मुझे क्लिक करें - मैं टुकड़ा हो सकता हूँ!</h1>
    <p>मैं खुला सामग्री हूँ。</p>
  </div>
  <div data-role="collapsible">
    <h1>मुझे क्लिक करें - मैं टुकड़ा हो सकता हूँ!</h1>
    <p>मैं खुला सामग्री हूँ。</p>
  </div>
</div>

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

अधिक सामग्री

data-inset एट्रिब्यूट के माध्यम से गोलाकार कोण को हटाएं
कैसे collapsibles पर गोलाकार कोण को हटाया जाए।
data-mini के माध्यम से collapsibles को छोटा करें
कैसे collapsibles को छोटा बनाया जाए।
data-collapsed-icon और data-expanded-icon के माध्यम से आयकॉन को बदलें
कैसे collapsibles के आयकॉन को बदला जाए (डिफ़ॉल्ट + और - हैं)।