Складные Блоки jQuery Mobile

Рубрика: jQuery Мобайл

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

Как Создать Складные Блоки Контента

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

Пример

<div data-role="collapsible">
<h1>Кликни меня - Я в складном блоке!</h1>
<p>Я складной контент.</p>
</div>

Попробуйте сами »

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

Пример

<div data-role="collapsible" data-collapsed="false">
<h1>Кликни меня - Я в складном блоке!</h1>
<p>Теперь я развернут по умолчанию.</p>
</div>

Попробуйте сами »

Вложенные Складные Блоки

Складные блоки контента могут быть вложены друг в друга:

Пример

<div data-role="collapsible">
<h1>Кликни меня - Я в складном блоке!</h1>
<p>Я развернутый контент.</p>
<div data-role="collapsible">
<h1>Кликни меня - Я вложенный складной блок!</h1>
<p>Я развернутый контент во вложенном складном блоке.</p>
</div>
</div>

Попробуйте сами »

Складные блоки контента могут быть вложены сколь угодно раз - сколько Вам заблагорассудится.

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

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

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

Пример

<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
Как изменить значок складных блоков (значение по умолчанию + и -).

Далее: Методы и Свойства Массива JavaScript

Смотрите также

Комментарии

Написать