Складные Блоки jQuery Mobile
Складные или раздвижные блоки позволяют Вам скрывать или показывать контент - полезно для хранения частей информации.
Как Создать Складные Блоки Контента
Чтобы создать складной блок контента, присвойте атрибут data-role="collapsible" контейнеру. В контейнере (div) добавьте элемент заголовка (H1-H6), сопровождаемый любой разметкой HTML, которую Вы хотите сделать складной:
Пример
<h1>Кликни меня - Я в складном блоке!</h1>
<p>Я складной контент.</p>
</div>
Попробуйте сами »
По умолчанию контент закрывается. Чтобы развернуть контент, когда страница загружается, используйте data-collapsed="false":
Пример
<h1>Кликни меня - Я в складном блоке!</h1>
<p>Теперь я развернут по умолчанию.</p>
</div>
Попробуйте сами »
Вложенные Складные Блоки
Складные блоки контента могут быть вложены друг в друга:
Пример
<h1>Кликни меня - Я в складном блоке!</h1>
<p>Я развернутый контент.</p>
<div data-role="collapsible">
<h1>Кликни меня - Я вложенный складной блок!</h1>
<p>Я развернутый контент во вложенном складном блоке.</p>
</div>
</div>
Попробуйте сами »
Складные блоки контента могут быть вложены сколь угодно раз - сколько Вам заблагорассудится.
Складные Наборы
Складные наборы - складные блоки, которые группируются друг с другом (их часто называют гармошкой). Когда новый блок открывается, все другие блоки закрываются.
Создайте несколько складных блоков контента, и затем оберните новый контейнер с data-role="collapsible-set" вокруг складных блоков:
Пример
<div data-role="collapsible">
<h1>Кликни меня - Я складной!</h1>
<p>Я развернутый контент.</p>
</div>
<div data-role="collapsible">
<h1>Кликни меня - Я складной!</h1>
<p>Я развернутый контент.</p>
</div>
</div>
Попробуйте сами »
Еще Примеры
Удалите скругленный угол с атрибутом data-inset
Как удалить скругленные углы для складных блоков.
Уменьшите складные блоки с атрибутом data-mini
Как сделать складные блоки меньше.
Изменение значка с data-collapsed-icon и data-expanded-icon
Как изменить значок складных блоков (значение по умолчанию + и -).