jQuery Mobile Collapsibles

Składane Bloki Content

Collapsibles pozwalają ukryć lub wyświetlić zawartość, która jest przydatna do przechowywania części informacji.

Aby utworzyć składaną blok zawartości, należy przypisać data-role="collapsible" atrybut do pojemnika. Wewnątrz pojemnika (div) , dodać nagłówek (H1-H6) lub element legendy, a następnie żadnych znaczników HTML chcesz zostać rozszerzony:

Przykład

<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>

Spróbuj sam "

Domyślnie treść jest zamknięty. Aby rozwinąć zawartość po załadowaniu strony, wykorzystanie data-collapsed="false" :

Przykład

<div data-role="collapsible" data-collapsed="false" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm now expanded by default.</p>
</div>

Spróbuj sam "

Zagnieżdżone bloki składane

Składane bloki treści można zagnieżdżać (składany wewnątrz składany):

Przykład

<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
<div data-role="collapsible" >
<h1>Click me - I'm a nested collapsible block!</h1>
<p>I'm the expanded content in the nested collapsible block.</p>
</div>
</div>

Spróbuj sam "

Składane bloki treści mogą być zagnieżdżone tyle razy, ile chcesz.

Zestawy składane

Składane zestawy są składane bloki, które tworzą ze sobą (często określane jako harmonijki). Kiedy nowy blok jest otwarty, wszystkie inne bloki blisko.

Tworzenie kilku składane bloki zawartości, a następnie owinąć nowy pojemnik z data-role = "collapsibleset" wokół składanych bloków:

Przykład

<div data-role="collapsibleset" >
<div data-role="collapsible">
    <h1>Click me - I'm collapsible!</h1>
    <p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
    <h1>Click me - I'm collapsible!</h1>
    <p>I'm the expanded content.</p>
</div>
</div>

Spróbuj sam "