Collapsible — jQuery Mobile

Сворачиваемый виджетверсия добавлена: 1.0

Описание: Создаёт сворачиваемый блок содержимого

Сворачиваемое содержимое

Примечание: Сворачиваемый виджет устарел начиная с версии 1.5 и будет удален в версии 1.6. Используйте аккордеон вместо сворачиваемого виджета.

Чтобы создать сворачиваемый блок содержимого, создайте контейнер и добавьте атрибут data-role="collapsible". Использование атрибута data-content-theme позволяет установить тему для содержимого сворачиваемого виджета.

Непосредственно внутри этого контейнера добавьте любой заголовок (H1-H6) или элемент legend. Фреймворк стилизует заголовок как нажимаемую кнопку и добавит иконку "+" слева, чтобы указать, что он разворачивается.

После заголовка добавьте любой HTML-разметку, которую вы хотите сделать сворачиваемой. Фреймворк обернёт эту разметку в контейнер, который будет скрываться/отображаться при нажатии на заголовок.

По умолчанию содержимое будет свернуто.

<div data-role="collapsible">
  <h3>I'm a header</h3>
  <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

Этот код создаст сворачиваемый виджет так:

Тематическое оформление

Сворачиваемый виджет использует фреймворк jQuery Mobile CSS для стилизации своего внешнего вида. Если требуется специфическое стилизация сворачиваемого виджета, следующие имена классов CSS могут быть использованы для переопределения или в качестве ключей для опции classes:

ui-collapsible: Внешний контейнер для сворачиваемого виджета. По умолчанию содержит дополнительные классы ui-collapsible-inset, ui-collapsible-themed-content и ui-collapsible-collapsed, если не добавлены опции для их отключения.
- ui-collapsible-heading: Всегда видимая часть сворачиваемого виджета, которая нажимается для его открытия. Дополнительно содержит класс ui-collapsible-heading-collapsed, когда сворачиваемый виджет закрыт.
  - ui-collapsible-heading-toggle: Переключатель для сворачиваемого виджета
    - ui-collapsible-heading-status: Текст состояния переключателя
- ui-collapsible-content: Содержимое сворачиваемого виджета. Дополнительно содержит класс ui-collapsible-content-collapsed, если содержимое свернуто.

Изначально развернутые сворачиваемые элементы

Когда вы добавляете атрибут data-collapsed="false" к обёртке, сворачиваемый виджет будет изначально развернут.

<div data-role="collapsible" data-collapsed="false">

Этот код создаст сворачиваемый виджет так:

Сворачиваемые элементы без вставки

По умолчанию сворачиваемые элементы имеют вид с вставкой. Чтобы сделать их полноширинными без оформления углов, добавьте атрибут data-inset="false" к элементу.

<div data-role="collapsible" data-inset="false">

Этот код создаст сворачиваемый элемент без вставки:

Мини-сворачиваемые элементы

Для более компактного варианта, полезного в панелях инструментов и ограниченном пространстве, добавьте атрибут data-mini="true" к элементу, чтобы создать мини-версию.

<div data-role="collapsible" data-mini="true">

Этот код создаст мини-сворачиваемый виджет:

Пользовательские иконки

По умолчанию иконка заголовков сворачиваемого виджета может быть переопределена с помощью атрибутов data-collapsed-icon и data-expanded-icon. В примере ниже используются data-collapsed-icon="arrow-r" и data-expanded-icon="arrow-d".

Позиционирование иконок

По умолчанию позиционирование иконок заголовков сворачиваемого виджета может быть переопределено с помощью атрибута data-iconpos. В примере ниже используется data-iconpos="right".

Тематическое оформление содержимого сворачиваемого виджета

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

Чтобы обеспечить более сильную визуальную связь между заголовком и содержимым сворачиваемого виджета, добавьте атрибут data-content-theme к обёртке и укажите букву темы. Это применяет цвет границы и фона штриха к блоку содержимого и изменяет скругление углов, чтобы скрыть нижнюю часть заголовка и округлить нижнюю часть блока содержимого вместо этого, чтобы визуально сгруппировать эти элементы.

<div data-role="collapsible" data-content-theme="b">
  <h3>Header</h3>
  <p>I'm the collapsible content with a themed content block set to "b".</p>
</div>

Тематическое оформление заголовков сворачиваемого виджета

Чтобы установить тему для кнопки заголовка сворачиваемого виджета, добавьте атрибут data-theme к обёртке и укажите букву штриха. Обратите внимание, что вы можете смешивать и сопоставлять буквы штриха между заголовком и содержимым с помощью этих атрибутов темы.

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <h3>Header swatch B</h3>
  <p>I'm the collapsible content with a themed content block set to "b".</p>
</div>

Вложенные сворачиваемые элементы

Сворачиваемые элементы могут быть вложены друг в друга по мере необходимости. В этом примере мы устанавливаем тему содержимого, чтобы обеспечить более чёткую визуальную связь между уровнями.

Наборы сворачиваемых элементов (аккордеоны)

Можно объединить несколько сворачиваемых элементов в группу, которая работает как виджет аккордеон.

Предоставление предварительно рендерной разметки

Вы можете улучшить время загрузки страницы, предоставив разметку, которую виджет сворачивания обычно создаёт во время своей инициализации.

Предоставив эту разметку самостоятельно и указав это, установив атрибут data-enhanced="true", вы указываете виджету сворачивания пропустить эти манипуляции с DOM во время инициализации и предположить, что необходимая структура DOM уже присутствует.

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

Сворачиваемый виджет создаёт ссылку из элемента заголовка и оборачивает остальные дочерние элементы внешнего виджета в div, который будет служить контейнером для содержимого сворачиваемого элемента.

В примере ниже предоставлена предварительно рендерная разметка для сворачиваемого элемента. Атрибут data-collapsed-icon="arrow-r" явно указан, так как использование класса ui-icon-arrow-r в элементе ссылки указывает, что значение параметра виджета "collapsedIcon" должно быть "arrow-r".

<div data-role="collapsible" data-enhanced="true" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-collapsed" data-collapsed-icon="arrow-r">
  <h2 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
    <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-arrow-r">
      Pre-rendered collapsible
      <span class="ui-collapsible-heading-status"> click to expand contents</span>
    </a>
  </h2>
  <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
    <p>This is the collapsible-content</p>
  </div>
</div>

Параметры

classes

Type: Object

Default:

{}

Укажите дополнительные классы для добавления к элементам виджета. Любые из классов, указанные в разделе Тема оформления, могут использоваться в качестве ключей для изменения их значения. Чтобы узнать больше об этом параметре, ознакомьтесь со статьей статьей о параметре classes.

Примеры кода:

Инициализируйте раскрывающийся элемент с указанным параметром classes, изменив тему оформления для класса ui-collapsible:

$( ".selector" ).collapsible({
  classes: {
    "ui-collapsible": "highlight"
  }
});

Получите или установите свойство параметра classes после инициализации, здесь мы читаем и меняем тему оформления для класса ui-collapsible:

// Getter
var themeClass = $( ".selector" ).collapsible( "option", "classes.ui-collapsible" );
 
// Setter
$( ".selector" ).collapsible( "option", "classes.ui-collapsible", "highlight" );

collapseCueText

Type: String

Default: " click to collapse contents"

Этот текст используется для обеспечения звуковой обратной связи для пользователей с программным обеспечением для чтения с экрана.

Если значение не установлено для отдельного контейнера раскрывающегося элемента, но этот контейнер является частью набора раскрывающихся элементов, то значение наследуется от родительского набора раскрывающихся элементов.

Этот параметр также представлен в виде атрибута данных: data-collapse-cue-text=" collapse with a click".

Примеры кода:

Инициализируйте раскрывающийся элемент с указанным параметром collapseCueText:

$( ".selector" ).collapsible({
  collapseCueText: " collapse with a click"
});

Получите или установите параметр collapseCueText после инициализации:

// Getter
var collapseCueText = $( ".selector" ).collapsible( "option", "collapseCueText" );
 
// Setter
$( ".selector" ).collapsible( "option", "collapseCueText", " collapse with a click" );

collapsed

Type: Boolean

Default: true

Если значение false, контейнер изначально развернут со значком минуса в заголовке.

Этот параметр также представлен в виде атрибута данных: data-collapsed="false".

Примеры кода:

Инициализируйте раскрывающийся элемент с указанным параметром collapsed:

$( ".selector" ).collapsible({
  collapsed: false
});

Получите или установите параметр collapsed после инициализации:

// Getter
var collapsed = $( ".selector" ).collapsible( "option", "collapsed" );
 
// Setter
$( ".selector" ).collapsible( "option", "collapsed", false );

collapsedIcon

Type: String or Boolean

Default: "plus"

Устанавливает значок для заголовка контейнера раскрывающегося элемента, когда он находится в свернутом состоянии.

Если значение не установлено для отдельного контейнера раскрывающегося элемента, но этот контейнер является частью набора раскрывающихся элементов, то значение наследуется от родительского набора раскрывающихся элементов.

Этот параметр также представлен в виде атрибута данных: data-collapsed-icon="arrow-r".

Поддерживается несколько типов:

String: Имя значка, который вы хотите использовать.
Boolean: В дополнение к имени значка, вы также можете установить этот параметр в false. В этом случае у раскрывающегося элемента не будет значка ни в развернутом, ни в свернутом состоянии. Добавьте data-collapsed-icon="false" к виджету раскрывающегося элемента, чтобы установить параметр в false с помощью атрибута данных.

Примеры кода:

Инициализируйте раскрывающийся элемент с указанным параметром collapsedIcon:

$( ".selector" ).collapsible({
  collapsedIcon: "arrow-r"
});

Получите или установите параметр collapsedIcon после инициализации:

// Getter
var collapsedIcon = $( ".selector" ).collapsible( "option", "collapsedIcon" );
 
// Setter
$( ".selector" ).collapsible( "option", "collapsedIcon", "arrow-r" );

contentTheme

Type: String

Default: null

Устанавливает цветовую схему (палитру) для содержимого раскрывающегося элемента. Он принимает одну букву от a до z, которая соответствует палитрам, включенным в вашу тему.

Если значение не установлено для отдельного контейнера раскрывающегося элемента, но этот контейнер является частью набора раскрывающихся элементов, то значение наследуется от родительского набора раскрывающихся элементов.

Возможные значения: буква палитры (a-z).

Этот параметр также представлен в виде атрибута данных: data-content-theme="b".

Примеры кода:

Инициализируйте раскрывающийся элемент с указанным параметром contentTheme:

$( ".selector" ).collapsible({
  contentTheme: "b"
});

Получите или установите параметр contentTheme после инициализации:

// Getter
var contentTheme = $( ".selector" ).collapsible( "option", "contentTheme" );
 
// Setter
$( ".selector" ).collapsible( "option", "contentTheme", "b" );

corners

Type: Boolean

Default: true

Применяет радиус границы темы, если установлен в true.

Если значение не установлено для отдельного контейнера раскрывающегося элемента, но этот контейнер является частью набора раскрывающихся элементов, то значение наследуется от родительского набора раскрывающихся элементов.

Этот параметр также представлен в виде атрибута данных: data-corners="false".

Примеры кода:

Инициализируйте раскрывающийся элемент с указанным параметром corners:

$( ".selector" ).collapsible({
  corners: false
});

Получите или установите параметр corners после инициализации:

// Getter
var corners = $( ".selector" ).collapsible( "option", "corners" );
 
// Setter
$( ".selector" ).collapsible( "option", "corners", false );

defaults

Type: Boolean

Default: false

Установка этого параметра в true указывает на то, что другие параметры виджетов имеют значения по умолчанию, и заставляет код автоматического улучшения виджетов jQuery Mobile опускать шаг, на котором он извлекает значения параметров из атрибутов данных. Это может улучшить время запуска.

Этот параметр также представлен в виде атрибута данных: data-defaults="true".

Примеры кода:

Инициализируйте раскрывающийся элемент с указанным параметром defaults:

$( ".selector" ).collapsible({
  defaults: true
});

Получите или установите параметр defaults после инициализации:

// Getter
var defaults = $( ".selector" ).collapsible( "option", "defaults" );
 
// Setter
$( ".selector" ).collapsible( "option", "defaults", true );

disabled

Type: Boolean

Default: false

Отключает раскрывающийся элемент, если установлен в true.

Этот параметр также представлен в виде атрибута данных: data-disabled="true".

Примеры кода:

Инициализируйте раскрывающийся элемент с указанным параметром disabled:

$( ".selector" ).collapsible({
  disabled: true
});

Получите или установите параметр disabled после инициализации:

// Getter
var disabled = $( ".selector" ).collapsible( "option", "disabled" );
 
// Setter
$( ".selector" ).collapsible( "option", "disabled", true );

enhanced

Type: Boolean

Default: false

Указывает, что разметка, необходимая для виджета раскрывающегося элемента, была предоставлена как часть исходной разметки.

Этот параметр также представлен в виде атрибута данных: data-enhanced="true".

Примеры кода:

Инициализируйте раскрывающийся элемент с указанным параметром enhanced:

$( ".selector" ).collapsible({
  enhanced: true
});

Получите или установите параметр enhanced после инициализации:

// Getter
var enhanced = $( ".selector" ).collapsible( "option", "enhanced" );
 
// Setter
$( ".selector" ).collapsible( "option", "enhanced", true );

expandCueText

Type: String

Default: " click to expand contents"

Этот текст используется для обеспечения звуковой обратной связи для пользователей с программным обеспечением для чтения с экрана.

Если значение не установлено для отдельного контейнера раскрывающегося элемента, но этот контейнер является частью набора раскрывающихся элементов, то значение наследуется от родительского набора раскрывающихся элементов.

Этот параметр также представлен в виде атрибута данных: data-expand-cue-text=" expand with a click".

Примеры кода:

Инициализируйте раскрывающийся элемент с указанным параметром expandCueText:

$( ".selector" ).collapsible({
  expandCueText: " expand with a click"
});

Получите или установите параметр expandCueText после инициализации:

// Getter
var expandCueText = $( ".selector" ).collapsible( "option", "expandCueText" );
 
// Setter
$( ".selector" ).collapsible( "option", "expandCueText", " expand with a click" );

expandedIcon

Type: String

Default: "minus"

Устанавливает значок для заголовка контейнера раскрывающегося элемента, когда он находится в развернутом состоянии.

Если значение не установлено для отдельного контейнера раскрывающегося элемента, но этот контейнер является частью набора раскрывающихся элементов, то значение наследуется от родительского набора раскрывающихся элементов.

Этот параметр также представлен в виде атрибута данных: data-expanded-icon="arrow-d".

Примеры кода:

Инициализируйте раскрывающийся элемент с указанным параметром expandedIcon:

$( ".selector" ).collapsible({
  expandedIcon: "arrow-d"
});

Получите или установите параметр expandedIcon после инициализации:

// Getter
var expandedIcon = $( ".selector" ).collapsible( "option", "expandedIcon" );
 
// Setter
$( ".selector" ).collapsible( "option", "expandedIcon", "arrow-d" );

heading

Type: String

Default: "h1,h2,h3,h4,h5,h6,legend"

Внутри контейнера раскрывающегося элемента первый непосредственный дочерний элемент, соответствующий этому селектору, будет использоваться в качестве заголовка для раскрывающегося элемента.

Этот параметр также представлен в виде атрибута данных: data-heading=".mycollapsibleheading".

Примеры кода:

Инициализируйте раскрывающийся элемент с указанным параметром heading:

$( ".selector" ).collapsible({
  heading: ".mycollapsibleheading"
});

Получите или установите параметр heading после инициализации:

// Getter
var heading = $( ".selector" ).collapsible( "option", "heading" );
 
// Setter
$( ".selector" ).collapsible( "option", "heading", ".mycollapsibleheading" );

iconpos

Type: String

Default: "left"

Размещает значок в заголовке раскрывающегося элемента.

Если значение не установлено для отдельного контейнера раскрывающегося элемента, но этот контейнер является частью набора раскрывающихся элементов, то значение наследуется от родительского набора раскрывающихся элементов.

Возможные значения: left, right, top, bottom, none, notext.

Этот параметр также представлен в виде атрибута данных: data-iconpos="right".

Примеры кода:

Инициализируйте раскрывающийся элемент с указанным параметром iconpos:

$( ".selector" ).collapsible({
  iconpos: "right"
});

Получите или установите параметр iconpos после инициализации:

// Getter
var iconpos = $( ".selector" ).collapsible( "option", "iconpos" );
 
// Setter
$( ".selector" ).collapsible( "option", "iconpos", "right" );

initSelector

Тип: Селектор

По умолчанию: See below

По умолчанию initSelector для виджета раскрывающегося блока:

":jqmData(role='collapsible')"

Примечание: Этот параметр устарел в версии 1.4.0 и будет удалён в версии 1.5.0.
Начиная с jQuery Mobile 1.4.0, параметр initSelector больше не является опцией виджета. Вместо этого он объявлен непосредственно в прототипе виджета. Таким образом, вы можете указать пользовательское значение, обработав событие mobileinit и перезаписав initSelector в прототипе:

$( document ).on( "mobileinit", function() {
  $.mobile.collapsible.prototype.initSelector = "div.custom";
});

Примечание: Не забудьте подключить обработчик события mobileinit после загрузки jQuery, но перед загрузкой jQuery Mobile, так как событие срабатывает в процессе загрузки jQuery Mobile.

Значение этого параметра — строка селектора jQuery. Фреймворк выбирает элементы на основе значения этого параметра и инициализирует виджеты раскрывающихся блоков для каждого из получившегося списка элементов.

(версия устарела: 1.4.0)

inset

Тип: Булево

По умолчанию: true

Установив этот параметр в false, элемент получит вид полной ширины без углов.

Если значение не задано для отдельного контейнера раскрывающегося блока, но этот контейнер является частью набора раскрывающихся блоков, то значение наследуется от родительского набора раскрывающихся блоков.

Этот параметр также доступен как атрибут данных: data-inset="false".

Примеры кода:

Инициализируйте раскрывающийся блок с указанием параметра inset:

$( ".selector" ).collapsible({
  inset: false
});

Получите или установите параметр inset после инициализации:

// Getter
var inset = $( ".selector" ).collapsible( "option", "inset" );
 
// Setter
$( ".selector" ).collapsible( "option", "inset", false );

mini

Тип: Булево

По умолчанию: false

Устанавливает размер элемента в более компактную, мини-версию.

Если значение не задано для отдельного контейнера раскрывающегося блока, но этот контейнер является частью набора раскрывающихся блоков, то значение наследуется от родительского набора раскрывающихся блоков.

Этот параметр также доступен как атрибут данных: data-mini="true".

Примеры кода:

Инициализируйте раскрывающийся блок с указанием параметра mini:

$( ".selector" ).collapsible({
  mini: true
});

Получите или установите параметр mini после инициализации:

// Getter
var mini = $( ".selector" ).collapsible( "option", "mini" );
 
// Setter
$( ".selector" ).collapsible( "option", "mini", true );

theme

Тип: Строка

По умолчанию: null

Устанавливает цветовую схему (палитру) для раскрывающегося блока. Принимает одиночную букву от a до z, которая сопоставляется с палитрами, включёнными в вашу тему.

Если значение не задано для отдельного контейнера раскрывающегося блока, но этот контейнер является частью набора раскрывающихся блоков, то значение наследуется от родительского набора раскрывающихся блоков.

Возможные значения: буква палитры (a-z).

Этот параметр также доступен как атрибут данных: data-theme="b".

Примеры кода:

Инициализируйте раскрывающийся блок с указанием параметра theme:

$( ".selector" ).collapsible({
  theme: "b"
});

Получите или установите параметр theme после инициализации:

// Getter
var theme = $( ".selector" ).collapsible( "option", "theme" );
 
// Setter
$( ".selector" ).collapsible( "option", "theme", "b" );

Методы

collapse()Возвращает: jQuery (только для плагина)

Сворачивает раскрывающийся блок.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода collapse:

$( ".selector" ).collapsible( "collapse" );

destroy()Возвращает: jQuery (только для плагина)

Полностью удаляет функциональность раскрывающегося блока. Это вернёт элемент в состояние до инициализации.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода destroy:

$( ".selector" ).collapsible( "destroy" );

disable()Возвращает: jQuery (только для плагина)

Отключает раскрывающийся блок.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода disable:

$( ".selector" ).collapsible( "disable" );

enable()Возвращает: jQuery (только для плагина)

Включает раскрывающийся блок.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода enable:

$( ".selector" ).collapsible( "enable" );

expand()Возвращает: jQuery (только для плагина)

Развертывает раскрывающийся блок.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода expand:

$( ".selector" ).collapsible( "expand" );

option( optionName )Возвращает: Объект

Получает значение, связанное с указанным optionName.

optionName

Тип: Строка

Имя параметра для получения.

Примеры кода:

Вызов метода:

var isDisabled = $( ".selector" ).collapsible( "option", "disabled" );

option()Возвращает: Объект

Получает объект, содержащий пары "ключ/значение", представляющие текущий хеш параметров раскрывающегося блока.

Этот метод не принимает аргументов.

Примеры кода:

Вызов метода:

var options = $( ".selector" ).collapsible( "option" );

option( optionName, value )Возвращает: jQuery (только для плагина)

Устанавливает значение параметра раскрывающегося блока, связанного с указанным optionName.

optionName

Тип: Строка

Имя параметра для установки.
value

Тип: Объект

Значение для параметра.

Примеры кода:

Вызов метода:

$( ".selector" ).collapsible( "option", "disabled", true );

option( options )Возвращает: jQuery (только для плагина)

Устанавливает один или несколько параметров для раскрывающегося блока.

options

Тип: Объект

Карта пар "параметр-значение" для установки.

Примеры кода:

Вызов метода:

$( ".selector" ).collapsible( "option", { disabled: true } );

События

collapse( event, ui )Тип: `collapsiblecollapse`

Срабатывает, когда раскрывающийся блок сворачивается

event

Тип: Событие
ui

Тип: Объект

Примечание: Объект ui пуст, но включён для согласованности с другими событиями.

Примеры кода:

Инициализируйте раскрывающийся блок с указанием обратного вызова collapse:

$( ".selector" ).collapsible({
  collapse: function( event, ui ) {}
});

Привяжите обработчик событий к событию collapsiblecollapse:

$( ".selector" ).on( "collapsiblecollapse", function( event, ui ) {} );

create( event, ui )Тип: `collapsiblecreate`

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

event

Тип: Событие
ui

Тип: Объект

Примечание: Объект ui пуст, но включён для согласованности с другими событиями.

Примеры кода:

Инициализируйте раскрывающийся блок с указанием обратного вызова create:

$( ".selector" ).collapsible({
  create: function( event, ui ) {}
});

Привяжите обработчик событий к событию collapsiblecreate:

$( ".selector" ).on( "collapsiblecreate", function( event, ui ) {} );

expand( event, ui )Тип: `collapsibleexpand`

Срабатывает, когда раскрывающийся блок раскрывается

event

Тип: Событие
ui

Тип: Объект

Примечание: Объект ui пуст, но включён для согласованности с другими событиями.

Примеры кода:

Инициализируйте раскрывающийся блок с указанием обратного вызова expand:

$( ".selector" ).collapsible({
  expand: function( event, ui ) {}
});

Привяжите обработчик событий к событию collapsibleexpand:

$( ".selector" ).on( "collapsibleexpand", function( event, ui ) {} );

Пример:

Базовый пример раскрывающегося блока контента.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>collapsible demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>jQuery Mobile Example</h1>
  </div>
  <div role="main" class="ui-content">
    <div data-role="collapsible">
      <h3>I'm a header</h3>
      <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
    </div>
  </div>
</div>
 
</body>
</html>

Сворачиваемый виджет

Сворачиваемый виджетверсия добавлена: 1.0

Быстрый переходПримеры

Параметры

Методы

События

Сворачиваемое содержимое

Тематическое оформление

Изначально развернутые сворачиваемые элементы

Сворачиваемые элементы без вставки

Мини-сворачиваемые элементы

Пользовательские иконки

Позиционирование иконок

Тематическое оформление содержимого сворачиваемого виджета

Тематическое оформление заголовков сворачиваемого виджета

Вложенные сворачиваемые элементы

Наборы сворачиваемых элементов (аккордеоны)

Предоставление предварительно рендерной разметки

Параметры

classes

collapseCueText

collapsed

collapsedIcon

contentTheme

corners

defaults

disabled

enhanced

expandCueText

expandedIcon

heading

iconpos

initSelector

inset

mini

theme

Методы

collapse()Возвращает: jQuery (только для плагина)

destroy()Возвращает: jQuery (только для плагина)

disable()Возвращает: jQuery (только для плагина)

enable()Возвращает: jQuery (только для плагина)

expand()Возвращает: jQuery (только для плагина)

option( optionName )Возвращает: Объект

option()Возвращает: Объект

option( optionName, value )Возвращает: jQuery (только для плагина)

option( options )Возвращает: jQuery (только для плагина)

События

collapse( event, ui )Тип: collapsiblecollapse

create( event, ui )Тип: collapsiblecreate

expand( event, ui )Тип: collapsibleexpand

Пример:

Демо:

collapse( event, ui )Тип: `collapsiblecollapse`

create( event, ui )Тип: `collapsiblecreate`

expand( event, ui )Тип: `collapsibleexpand`