jQuery Mobile kääntyvät

Kegelmäiset sisältölohkot

Kegelmäiset (Collapsibles) mahdollistavat sisällön piilottamisen tai näyttämisen - hyödyllistä osan tiedon tallentamisessa.

Jos haluat luoda kegelmäisen sisältölohkon, anna jollekin kontille data-role="collapsible" -ominaisuus. Lisää konttiin (div) otselulementti (h1-h6), sen jälkeen tarpeellinen HTML-koodi:

Esimerkki

<div data-role="collapsible">
  <h1>Klikkaa minua - Voin piilotella!</h1>
  <p>Olen kegelmäinen sisältö.</p>
</div>

Kokeile itse

Oletusarvoisesti sisältö on suljettu. Jos haluat laajentaa sisältöä sivun lataamisen yhteydessä, käytä data-collapsed="false":

Esimerkki

<div data-role="collapsible" data-collapsed="false">
  <h1>Klikkaa minua - Voin piilotella!</h1>
  <p>Nyt olen oletusarvoisesti avattu.</p>
</div>

Kokeile itse

Sisäkkäiset kegelmäiset lohkot

Voit sisällyttää kegelmäisiä sisältölohkoja:

Esimerkki

<div data-role="collapsible">
  <h1>Klikkaa minua - Voin piilotella!</h1>
  <p>Olen avattu sisältö.</p>
  <div data-role="collapsible">
    <h1>Klikkaa minua - Olen sisäkkäinen kegelmäinen lohko!</h1>
    <p>Olen sisäkkäisessä kegelmäisessä lohkossa avattu sisältö.</p>
  </div>
</div>

Kokeile itse

Vinkki:Kegelmäiset sisältölohkot voidaan sisällyttää toiseen haluamallasi määrällä.

Kegelmäiset joukot

Kegelmäiset joukot (Collapsible sets) tarkoittavat yhdessä yhdistettyjä kegelmäisiä lohkoja (usein kutsuttuina harmonikoina). Kun uusi lohko avataan, kaikki muut lohkot sulkeutuvat.

Luo useita sisältölohkoja ja pakkaa ne uuteen konttiin data-role="collapsible-set":

Esimerkki

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Klikkaa minua - Voin piilotella!</h1>
    <p>Olen avattu sisältö.</p>
  </div>
  <div data-role="collapsible">
    <h1>Klikkaa minua - Voin piilotella!</h1>
    <p>Olen avattu sisältö.</p>
  </div>
</div>

Kokeile itse

Lisää esimerkkejä

Poista pyöristetyt kulmat data-inset ominaisuuden avulla
Kuinka poistaa kääntyvistä pyöristetyt kulmat.
Pienennä kääntyviä data-mini ominaisuuden avulla
Kuinka tehdä kääntyvistä pienemmiksi.
Muuta ikoneja data-collapsed-icon ja data-expanded-icon avulla
Kuinka muuttaa kääntyvien ikonit (oletuksena + ja -).