jQuery Mobile fällbara

Vecklingsbara innehållsblock

Vecklingsbara (Collapsibles) låter dig dölja eller visa innehåll - mycket användbart för att lagra del av information.

För att skapa vecklingsbara innehållsblock, tilldela data-role="collapsible"-egenskapen till en behållare. Lägg till en rubrikselement (h1-h6) efteråt, följt av vilket HTML-märken du vill expandera:

Exempel

<div data-role="collapsible">
  <h1>Klicka på mig - jag kan vecklas ut!</h1>
  <p>Jag är det vecklingsbara innehållet.</p>
</div>

Prova själv

Som standard är innehållet stängt. Om du vill expandera innehållet vid sidan av laddning, använd data-collapsed="false":

Exempel

<div data-role="collapsible" data-collapsed="false">
  <h1>Klicka på mig - jag kan vecklas ut!</h1>
  <p>Jag är förinställd att vara öppen nu.</p>
</div>

Prova själv

Nästlade vecklingsbara block

Du kan nästla vecklingsbara innehållsblock:

Exempel

<div data-role="collapsible">
  <h1>Klicka på mig - jag kan vecklas ut!</h1>
  <p>Jag är innehållet som har öppnats.</p>
  <div data-role="collapsible">
    <h1>Klicka på mig - jag är den nästlade vecklingsbara blocken!</h1>
    <p>Jag är innehållet som har öppnats i den nästlade vecklingsbara blocken.</p>
  </div>
</div>

Prova själv

Tips:Vecklingsbara innehållsblock kan nästlas så många gånger som du vill.

Vecklingsbara samlingar

Vecklingsbara samlingar (Collapsible sets) är flera sammanfogade vecklingsbara block (ofta kallade pianister). När ett nytt block öppnas stängs alla andra block.

Skapa några innehållsblock och paketera den vecklingsbara blocken med en ny behållare genom att använda data-role="collapsible-set":

Exempel

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Klicka på mig - jag kan vecklas ut!</h1>
    <p>Jag är innehållet som har öppnats.</p>
  </div>
  <div data-role="collapsible">
    <h1>Klicka på mig - jag kan vecklas ut!</h1>
    <p>Jag är innehållet som har öppnats.</p>
  </div>
</div>

Prova själv

Mer exempel

Ta bort rundhörn genom data-inset-attributet
Hur man tar bort rundhörn på collapsibles.
Minimera collapsibles genom data-mini
Hur man gör collapsibles mindre.
Ändra ikoner genom data-collapsed-icon och data-expanded-icon
Hur man ändrar ikonerna för collapsibles (standard är + och -).