jQuery Mobile Katlanabilir

Kapanabilir içerik blokları

Kapanabilirler (Collapsibles), içerikleri gizlemek veya göstermek için izin verir - kısmi bilgileri saklamak için çok kullanışlıdır.

Kapanabilir içerik bloğu oluşturmak için, bir kapıcıya data-role="collapsible" özelliği atayın. Kapıcı (div) içinde, genişletmek istediğiniz herhangi bir HTML işareti olan bir başlık elementi (h1-h6) ekleyin:

Örnek

<div data-role="collapsible">
  <h1>Bana tıklayın - Kapanabilirim!</h1>
  <p>Bu ben kapanabilir içerikim.</p>
</div>

Deneyin

Varsayılan olarak, bu içerik kapalıdır. Sayfa yüklenirken içerik açmak istiyorsanız, data-collapsed="false" kullanın:

Örnek

<div data-role="collapsible" data-collapsed="false">
  <h1>Bana tıklayın - Kapanabilirim!</h1>
  <p>Şimdi varsayılan olarak açıktır.</p>
</div>

Deneyin

Yuvarlanabilir kapanabilir bloklar

Yuvarlanabilir içerik bloklarını içeren:

Örnek

<div data-role="collapsible">
  <h1>Bana tıklayın - Kapanabilirim!</h1>
  <p>Bu ben açılan içerikim.</p>
  <div data-role="collapsible">
    <h1>Bana tıklayın - Ben yuvarlanabilir kapanabilir bloğum!</h1>
    <p>Bu ben yuvarlanabilir kapanabilir blokların içinde açılan içerikim.</p>
  </div>
</div>

Deneyin

İpucu:Kapanabilir içerik blokları, istediğiniz kadar sınırsız olarak yuvarlanabilir.

Kapanabilir koleksiyonlar

Kapanabilir koleksiyonlar (Kapanabilir setler), bir araya getirilmiş kapanabilir bloklar (genellikle akordeon olarak bilinir) anlamına gelir. Yeni bir blok açıldığında, tüm diğer bloklar kapanır.

Birkaç içerik bloğu oluşturun, ardından bu kapanabilir bloğu yeni bir kapıcıya data-role="collapsible-set" ile sarın:

Örnek

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Bana tıklayın - Kapanabilirim!</h1>
    <p>Bu ben açılan içerikim.</p>
  </div>
  <div data-role="collapsible">
    <h1>Bana tıklayın - Kapanabilirim!</h1>
    <p>Bu ben açılan içerikim.</p>
  </div>
</div>

Deneyin

Daha fazla örnek

data-inset özelliği ile yuvarlak köşeleri silme
Collapsibles üzerindeki yuvarlak köşeleri nasıl kaldırabilirim.
data-mini ile collapsiblesi küçültme
Collapsibles'i nasıl daha küçük hale getirebilirim.
data-collapsed-icon ve data-expanded-icon ile ikonları değiştirme
Collapsibles'in ikonlarını nasıl değiştirebilirim (varsayılan + ve -).