قابلة للطي 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.
تقليل حجم collapsibles من خلال data-mini
كيفية جعل collapsibles أصغر.
تغيير الأيقونات من خلال data-collapsed-icon و data-expanded-icon
كيفية تغيير أيقونات collapsibles (الافتراضية هي + و -).