Последние учебники веб-разработки
 

jQuery Mobile Collapsibles


Разборные блоки контента

Collapsibles позволяют скрывать или отображать содержимое, которое полезно для хранения частей информации.

Чтобы создать разборную блок контента, присвоить data-role="collapsible" атрибута к контейнеру. Внутри контейнера (div) , добавить заголовок (H1-H6) или элемент легенды, а затем любой HTML - разметки вы хотите быть расширен:

пример

<div data-role="collapsible" >
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the expanded content.</p>
</div>
Попробуй сам "

По умолчанию содержимое закрыто. Для расширения содержимого при загрузке страницы, использование data-collapsed="false" :

пример

<div data-role="collapsible" data-collapsed="false" >
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm now expanded by default.</p>
</div>
Попробуй сам "

Вложенные разборные блоки

Разборные блоки контента могут быть вложенными (разборный внутри разборный):

пример

<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>
Попробуй сам "

Разборные блоки контента могут быть вложены столько раз, сколько вы хотите.


Складные наборы

Разборные комплекты сборно-разборные блоки, которые сгруппированы вместе (часто называют гармошкой). Когда новый блок открыт, все остальные блоки близко.

Создайте несколько разборных блоков контента, а затем обернуть новый контейнер с данными-роли = "collapsibleset" вокруг разборных блоков:

пример

<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>
Попробуй сам "

Еще примеры

Складывающийся всплывающее окно
Как создать разборную всплывающее окно.

Удалить закругленный угол с data-inset атрибута
Как удалить скругленные углы и добавить полную ширину на collapsibles.

Минимизировать collapsibles с data-mini - атрибута
Как сделать collapsibles меньше.

Изменение иконки с-значком данных, разрушилась и-иконкой данных вспененные
Как изменить иконку collapsibles (по умолчанию + и -).

Изменение положения значка
Как изменить положение значков в collapsibles (по умолчанию слева).