Виджет Collapsibleset

Виджет Collapsiblesetверсия добавлена: 1.0

Описание: Создаёт набор раскрывающихся блоков контента

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

Наборы раскрывающихся блоков

jQuery Mobile визуально стилизует набор раскрывающихся блоков как группу и заставит набор вести себя как аккордеон, при этом только один раскрывающийся блок может быть открыт одновременно, если вы обернёте раскрывающиеся блоки в div с атрибутом data-role="collapsibleset".

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

<div data-role="collapsible-set">
 
  <div data-role="collapsible" data-collapsed="false">
    <h3>Section 1</h3>
    <p>I'm the collapsibleset content for section 1. My content is initially visible.</p>
  </div>
 
  <div data-role="collapsible">
    <h3>Section 2</h3>
    <p>I'm the collapsibleset content for section 2.</p>
  </div>
 
</div>

Вот пример виджета collapsibleset с 5 разделами.

Виджеты collapsibleset без отступов

Для раскрывающихся блоков полной ширины без стилизации углов добавьте атрибут data-inset="false" к набору.

Виджеты collapsibleset mini

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

Настраиваемые иконки

Иконка, отображаемая при открытии или закрытии раскрывающегося блока, может быть переопределена с помощью атрибутов data-collapsed-icon и data-expanded-icon. Оба виджета collapsibleset и collapsible принимают эти атрибуты. Когда вы устанавливаете один или оба этих атрибута на виджете collapsibleset, все виджеты collapsible, которые являются частью отображения collapsibleset, отображают иконку, указанную выбранным значением. Вы можете переопределить отображаемую иконку для отдельных виджетов collapsible , установив один или оба этих атрибута на сам виджет collapsible.

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

По умолчанию позиционирование иконок для заголовков раскрывающихся блоков можно переопределить с помощью атрибута data-iconpos. Вы можете установить атрибут либо на collapsibleset, чтобы повлиять на все раскрывающиеся блоки в наборе, либо на отдельный виджет collapsible, чтобы повлиять только на этот виджет.

Темы раскрывающегося контента

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

<div data-role="collapsible-set" data-theme="b" data-content-theme="a">

Темы отдельных разделов

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

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

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

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

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

Виджет collapsibleset не требует, чтобы раскрывающиеся блоки, которые он содержит, также были предварительно отрендерены.

В примере ниже предоставлена предварительно отрендеренная разметка для виджета collapsibleset. Атрибут data-corners="false" явно указан, так как отсутствие класса ui-corner-all в контейнерном элементе указывает на то, что параметр виджета "corners" должен быть false. Один из дочерних раскрывающихся блоков предоставлен как есть, а другой — предварительно отрендерен.

<div data-role="collapsibleset" class="ui-collapsible-set" data-corners="false">
  <div data-role="collapsible">
    <h2>Child collapsible</h2>
    <p>This is the collapsible content.</p>
  </div>
  <div data-role="collapsible" data-enhanced="true" class="ui-collapsible ui-collapsible-inset ui-corner-all" data-collapsed="false" data-corners="true">
    <h2 class="ui-collapsible-heading">
      <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-minus">
        Pre-rendered child collapsible
        <span class="ui-collapsible-heading-status">click to collapse contents</span>
      </a>
    </h2>
    <div class="ui-collapsible-content" aria-hidden="false">
      <p>This is the collapsible content.</p>
    </div>
  </div>
</div>

Параметры

collapsedIcon

Тип: Строка

По умолчанию: "plus"

Устанавливает значок для заголовков контейнеров при сворачивании.

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

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

Инициализируйте collapsibleset с заданным параметром %%%CODE_BLOCK_29%% %:

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

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

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

corners

Тип: Булево

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

Применяет радиус границ темы к первому и последнему сжатию, если значение true.

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

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

Инициализируйте collapsibleset с заданным параметром %%%CODE_BLOCK_35%% %:

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

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

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

defaults

Тип: Булево

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

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

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

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

Инициализируйте collapsibleset с заданным параметром %%%CODE_BLOCK_42%% %:

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

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

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

disabled

Тип: Булево

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

Отключает collapsibleset, если значение true.

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

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

Инициализируйте collapsibleset с заданным параметром %%%CODE_BLOCK_49%% %:

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

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

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

enhanced

Тип: Булево

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

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

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

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

Инициализируйте collapsibleset с заданным параметром %%%CODE_BLOCK_55%% %:

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

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

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

expandedIcon

Тип: Строка

По умолчанию: "minus"

Устанавливает значок для заголовка контейнера при раскрытии.

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

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

Инициализируйте collapsibleset с заданным параметром %%%CODE_BLOCK_61%% %:

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

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

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

iconpos

Тип: Строка

По умолчанию: "left"

Позиционирует значок в заголовках сжатия.

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

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

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

Инициализируйте collapsibleset с заданным параметром %%%CODE_BLOCK_67%% %:

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

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

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

initSelector

Тип: Строка

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

Значение по умолчанию initSelector для виджета collapsibleset:

":jqmData(role='collapsibleset')"

Этот параметр устарел в версии 1.4.0 и будет удален в версии 1.5.0.

Старое значение параметра initSelector виджета collapsibleset (":jqmData(role='collapsible-set')") устарело. С версии jQuery Mobile 1.5.0, только виджеты с атрибутом data-role="collapsibleset" будут расширены как виджеты collapsibleset.

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

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

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

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

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

initSelector

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

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

Значение по умолчанию initSelector для виджета collapsibleset:

":jqmData(role='collapsibleset')"

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

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

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

inset

Тип: Булево

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

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

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

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

Инициализируйте collapsibleset с заданным параметром %%%CODE_BLOCK_92%% %:

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

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

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

mini

Тип: Булево

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

Устанавливает размер элемента в более компактную, мини-версию. Если значение false для отдельного контейнера сжатия, но этот контейнер является частью виджета collapsibleset, то значение наследуется от родительского виджета collapsibleset.

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

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

Инициализируйте collapsibleset с заданным параметром %%%CODE_BLOCK_98%% %:

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

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

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

Методы

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

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

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

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

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

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

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

Деактивирует collapsibleset.

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

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

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

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

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

Активирует collapsibleset.

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

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

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

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

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

Возвращает значение, в данный момент связанное с указанным optionName.

optionName

Тип: Строка

Имя опции для получения.

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

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

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

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

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

Эта сигнатура не принимает никаких аргументов.

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

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

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

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

Устанавливает значение опции collapsibleset, связанной с указанным optionName.

optionName

Тип: Строка

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

Тип: Объект

Значение для установки опции.

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

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

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

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

Устанавливает одну или несколько опций для collapsibleset.

options

Тип: Объект

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

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

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

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

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

Обновляет виджет collapsibleset.

Если вы изменяете виджет collapsibleset с помощью JavaScript (например, добавлением новых collapsibles, удалением старых или отображением/скрытием существующих), вам необходимо вызвать метод refresh, чтобы обновить визуальное форматирование. Этот метод будет инициализировать collapsibles в дочерних элементах, которые помечены data-role="collapsible", поэтому нет необходимости вручную вызывать .collapsible().

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

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

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

$( ".selector" ).collapsibleset( "refresh" );

События

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

Срабатывает при создании collapsibleset.

event

Тип: Event
ui

Тип: Объект

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

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

Инициализация collapsibleset со специфицированным обработчиком create:

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

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

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

Пример:

Базовый пример виджета collapsibleset.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>collapsibleset 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="collapsibleset">
      <div data-role="collapsible" data-collapsed="false">
        <h3>Section A</h3>
        <p>I'm the collapsibleset content for section A.</p>
      </div>
      <div data-role="collapsible">
        <h3>Section B</h3>
        <p>I'm the collapsibleset content for section B.</p>
      </div>
    </div>
  </div>
</div>
 
</body>
</html>

Демо:

© The jQuery Foundation and other contributors
Licensed under the MIT License.
https://api.jquerymobile.com/collapsibleset

Виджет Collapsibleset