Przekładane jQuery Mobile

Złożone bloki treści

Złożone (Collapsibles) pozwalają ukrywać lub wyświetlać treść - bardzo przydatne do przechowywania częściowych informacji.

Aby utworzyć blok złożony, przypisz atrybut data-role="collapsible" do jakiegoś kontenera. W kontenerze (div) dodaj element tytułowy (h1-h6), a następnie dowolne HTML znaczniki, które chcesz rozszerzyć:

Przykład

<div data-role="collapsible">
  <h1>Kliknij mnie - Mogę się złożyć!</h1>
  <p>Jestem treścią złożoną.</p>
</div>

Spróbuj sam

Domyślnie, ta treść jest zamknięta. Aby rozszerzyć treść podczas ładowania strony, użyj data-collapsed="false":

Przykład

<div data-role="collapsible" data-collapsed="false">
  <h1>Kliknij mnie - Mogę się złożyć!</h1>
  <p>Teraz jestem domyślnie rozszerzony.</p>
</div>

Spróbuj sam

Wcięty blok złożony

Można wcięć bloki treści złożonych:

Przykład

<div data-role="collapsible">
  <h1>Kliknij mnie - Mogę się złożyć!</h1>
  <p>Jestem rozszerzonym treścią.</p>
  <div data-role="collapsible">
    <h1>Kliknij mnie - Jestem wciętym blokiem złożonym!</h1>
    <p>Jestem rozszerzanym treścią w wciętej złożonym bloku.</p>
  </div>
</div>

Spróbuj sam

Wskazówka:Złożone bloki treści mogą być wcięte tyle razy, ile chcesz.

Kolekcje złożonych bloków

Kolekcje złożonych bloków (Collapsible sets) to połączone razem bloki złożone (zwykle nazywane fletem). Kiedy nowy blok jest otwarty, wszystkie inne bloki się zamykają.

Stwórz kilka bloków treści, a następnie za pomocą data-role="collapsible-set" opakuj ten blok złożony w nowym kontenerze:

Przykład

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Kliknij mnie - Mogę się złożyć!</h1>
    <p>Jestem rozszerzonym treścią.</p>
  </div>
  <div data-role="collapsible">
    <h1>Kliknij mnie - Mogę się złożyć!</h1>
    <p>Jestem rozszerzonym treścią.</p>
  </div>
</div>

Spróbuj sam

Więcej przykładów

Usuń zaokrąglenia za pomocą atrybutu data-inset
Jak usunąć zaokrąglenia z collapsibles.
Minimalizuj collapsibles za pomocą data-mini
Jak uczynić collapsibles bardziej kompaktowymi.
Zmień ikony za pomocą data-collapsed-icon i data-expanded-icon
Jak zmienić ikony collapsibles (domyślnie to + i -).