Виджет Selectmenu

Меню выбора основано на нативном элементе select, который скрыт от пользователя и заменён на кнопку с пользовательским стилем, соответствующим внешнему виду фреймворка jQuery Mobile. Меню выбора поддерживает ARIA и доступно с помощью клавиатуры на настольных компьютерах.

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

Чтобы добавить меню выбора на вашу страницу, начните со стандартного элемента select , заполненного набором элементов option. Установите атрибут for элемента label , чтобы он соответствовал атрибуту id элемента select, для семантической связи. Можно скрывать метку, если она не нужна в макете страницы, но для семантических и доступностных целей она должна быть в разметке.

Фреймворк найдёт все элементы select и автоматически преобразует их в меню выбора, вам не нужно применять атрибут data-role. Чтобы предотвратить автоматическое преобразование элемента select, добавьте атрибут data-role="none" к элементу select.

• ui-selectmenu: Внешний контейнер для selectmenu.
  • ui-selectmenu-button: Кнопка с пользовательским стилем для selectmenu
    • ui-selectmenu-button-icon: Иконка кнопки selectmenu
    • ui-selectmenu-button-text: Текст кнопки selectmenu
  ui-selectmenu-custom: Внешний контейнер для пользовательского selectmenu.
  • ui-selectmenu-custom-list: Элемент списка для пользовательского selectmenu
    • ui-selectmenu-custom-header-close-button: Кнопка закрытия для пользовательского selectmenu
      • ui-selectmenu-custom-header-close-button-icom: Иконка кнопки закрытия для пользовательского selectmenu

<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-0">
  <option value="standard">Standard: 7 day</option>
  <option value="rush">Rush: 3 days</option>
  <option value="express">Express: next day</option>
  <option value="overnight">Overnight</option>
</select>

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

Мини-версия

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

<label for="select-choice-min" class="select">Shipping method:</label>
<select name="select-choice-min" id="select-choice-min" data-mini="true">
  <option value="standard">Standard: 7 day</option>
  <option value="rush">Rush: 3 days</option>
  <option value="express">Express: next day</option>
  <option value="overnight">Overnight</option>
</select>

Это создаст select, который не такой высокий, как стандартная версия, и имеет меньший размер шрифта.

Контейнеры полей

Для визуального группирования в длинных формах можно обернуть select в контейнер с классом ui-field-contain.

<div class="ui-field-contain">
  <label for="select-choice-1" class="select">Shipping method:</label>
  <select name="select-choice-1" id="select-choice-1">
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>
  </select>
</div>

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

Пример select с длинным списком значений:

Группы значений

В следующем примере значения организованы в элементы optgroup. Поддержка этой функции в мобильных select элементах не везде стабильна, но улучшается.

<div class="ui-field-contain">
  <label for="select-choice-nc" class="select">Preferred delivery:</label>
  <select name="select-choice-8" id="select-choice-nc">
    	<optgroup label="FedEx">
      <option value="firstOvernight">First Overnight</option>
      <option value="expressSaver">Express Saver</option>
      <option value="ground">Ground</option>
    </optgroup>
    <optgroup label="UPS">
      <option value="firstOvernight">First Overnight</option>
      <option value="expressSaver">Express Saver</option>
      <option value="ground">Ground</option>
    </optgroup>
    <optgroup label="US Mail">
      <option value="standard">Standard: 7 day</option>
      <option value="rush">Rush: 3 days</option>
      <option value="express">Express: next day (disabled)</option>
      <option value="overnight">Overnight</option>
    </optgroup>
  </select>
</div>

Вертикально сгруппированные поля select

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

Поскольку элемент label будет связан с каждым отдельным полем select и будет скрыт для стилизации, рекомендуется обернуть select в элемент fieldset с атрибутом legend, который будет общей меткой для сгруппированных полей.

Наконец, необходимо обернуть fieldset в div с атрибутом data-role="controlgroup", чтобы его можно было стилизовать как группу.

<div class="ui-field-contain">
  <fieldset data-role="controlgroup">
    <legend>Date of Birth:</legend>
 
    <label for="select-choice-month">Month</label>
    <select name="select-choice-month" id="select-choice-month">
      <option>Month</option>
      <option value="jan">January</option>
      <!-- etc. -->
    </select>
 
    <label for="select-choice-day">Day</label>
    <select name="select-choice-day" id="select-choice-day">
      <option>Day</option>
      <option value="1">1</option>
      <!-- etc. -->
    </select>
 
    <label for="select-choice-year">Year</label>
    <select name="select-choice-year" id="select-choice-year">
      <option>Year</option>
      <option value="2011">2011</option>
      <!-- etc. -->
    </select>
  </fieldset>
</div>

Горизонтально сгруппированные поля select

Поля select также могут использоваться для группировки наборов с более чем одним связанным выбором. Чтобы создать набор горизонтальных кнопок, добавьте data-type="horizontal" к fieldset. Обратите внимание, что кнопки, которые вызывают select, изменят размер в зависимости от значения выбранного в данный момент элемента.

<fieldset data-role="controlgroup" data-type="horizontal">

Стилизация select

Вы также можете указать любые атрибуты jQuery Mobile button data- для элемента select. В этом примере мы устанавливаем тему, иконку и свойства inline:

Пользовательские меню выбора

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

Вы можете использовать пользовательские меню вместо нативного меню операционной системы. Пользовательское меню поддерживает отключенные значения и множественный выбор (в то время как нативные мобильные операционные системы поддерживают это не всегда), предоставляет элегантный способ обработки значений по умолчанию и восстанавливает недостающие функции на определённых платформах, таких как optgroup на Android (все подробно описано ниже). Кроме того, фреймворк применяет тему пользовательской кнопки к меню, чтобы лучше соответствовать внешнему виду и обеспечивать визуальную согласованность на разных платформах. Наконец, пользовательские меню часто выглядят лучше в браузерах на настольных компьютерах, так как нативные меню настольных компьютеров меньше, чем на мобильных, и могут выглядеть непропорционально.

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

Чтобы использовать пользовательские меню для конкретного select, добавьте атрибут data-native-menu="false". В качестве альтернативы это можно также выполнить программно, установив опцию конфигурации select menu nativeMenu в значение false в обработчике события mobileinit для достижения того же эффекта. Это позволит по умолчанию использовать пользовательское меню для всех select.

$(document).on( "mobileinit", function() {
  $.mobile.selectmenu.prototype.options.nativeMenu = false;
});

Когда у select небольшое количество значений, которое помещается на экране устройства, меню отобразится как небольшое всплывающее окно с анимацией появления:

Если вариантов слишком много для отображения на экране устройства, фреймворк автоматически создаст новую страницу в стиле диалога, содержащую стандартный список значений. Это позволит использовать встроенную на устройстве прокрутку для перемещения по длинному списку. Текст внутри label используется в качестве заголовка для этой страницы. Учтите события страницы и контейнера страницы, которые будут сгенерированы для этой созданной страницы.

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

Отключенные значения

jQuery Mobile автоматически отключает и форматирует теги option с атрибутом disabled. В примере ниже второй вариант «Rush: 3 days» отключен.

Значения по умолчанию

Разработчики часто включают в элемент select опцию «null», чтобы заставить пользователя выбрать вариант. Если на вашей странице присутствует опция по умолчанию, jQuery Mobile скроет ее во всплывающем меню, показывая только допустимые варианты, и отобразит текст по умолчанию в меню в качестве заголовка. Опция по умолчанию добавляется, когда фреймворк находит:

• Опцию без атрибута значения
• Опцию с пустым атрибутом значения (value="").

  Примечание: Указание опции в качестве значения по умолчанию путем предоставления атрибута value и установки его в "" устарело начиная с jQuery Mobile 1.4.0 и будет удалено в 1.5.0.

• Опцию без текстового узла
• Опцию с атрибутом data-placeholder="true". (Это позволяет использовать опцию со значением и текстовым узлом как опцию по умолчанию).

Вы можете отключить эту функцию, используя опцию плагина selectmenu hidePlaceholderMenuItems:

$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;

Примеры различных опций по умолчанию:

Множественный выбор

Если атрибут multiple присутствует в вашей разметке, jQuery Mobile дополнит элемент несколькими дополнительными аспектами:

• В меню будет создан элемент заголовка, отображающий текст-заполнитель и кнопку закрытия.
• Нажатие на элемент внутри накладного меню не закроет виджет.
• Пустой, не выбранный значок будет отображаться рядом с каждым невыбранным элементом. При выборе элемента значок изменится на галочку. Ни один значок не будет отображаться внутри простого выпадающего списка.
• После выбора 2 и более элементов в кнопке отобразится счетчик с общим количеством выбранных элементов.
• Текст каждого выбранного элемента будет отображаться в кнопке в виде списка. Если кнопка недостаточно широкая, чтобы отобразить весь список, он обрезается с помощью многоточия.
• Если элементы не выбраны, текст кнопки будет по умолчанию текстом-заполнителем.
• Если элемент с текстом-заполнителем отсутствует, текст кнопки по умолчанию будет пустым, а заголовок будет отображаться только с кнопкой закрытия. Поскольку это не удобный пользовательский интерфейс, мы рекомендуем всегда указывать элемент с текстом-заполнителем при использовании нескольких выпадающих списков.
• В настоящее время jQuery Mobile поддерживает только атрибут multiple на элементе select с nativeMenu установленным в false.

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

Поддержка группировки

Если меню выпадающего списка содержит элементы optgroup, jQuery Mobile создаст разделитель и сгруппирует элементы на основе текста атрибута label:

Стилевое оформление выпадающих списков

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

Атрибут data-overlay-theme можно добавить к элементу выпадающего списка, чтобы задать цвет накладного слоя для диалоговых пользовательских меню выпадающих списков и внешнюю границу меньших пользовательских меню. По умолчанию для накладных слоев используются цвета блока содержимого для палитры "a".

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

Вызов плагина меню выпадающего списка

Плагин меню выпадающего списка будет автоматически инициализирован на любой странице, содержащей меню выпадающего списка, без необходимости атрибута data-role в разметке. Однако вы можете напрямую вызвать плагин меню выпадающего списка для любого селектора, как и любой обычный плагин jQuery:

$( "select" ).selectmenu();

Генерация ID

Виджет selectmenu добавляет ID к генерируемым элементам. Если у него нет ID, он будет использовать префикс, состоящий из select- и уникального числа для элементов. Если у него есть ID, он будет использовать его в качестве префикса. ID различных элементов, сгенерированных виджетом selectmenu, создается следующим образом:

кнопка

<prefix>-button

всплывающее окно

<prefix>-listbox

Этот идентификатор назначается элементу только тогда, когда виджет selectmenu создаётся с опцией nativeMenu установленной в значение false.

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

список

<prefix>-menu

Этот идентификатор назначается элементу только тогда, когда виджет selectmenu создаётся с опцией nativeMenu установленной в значение false.

Например, создание нестандартного selectmenu с

<select id="choose-city" data-native-menu="false">
  <option>Caracas</option>
  <option>Warszawa</option>
  <option>Yekaterinburg</option>
  <option>Pretoria</option>
</select>

приведёт к следующей разметке:

<div class="ui-select">
  <a id="choose-city-button" href="#" role="button" aria-haspopup="true" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow" data-rel="popup">
    <span>Caracas</span>
  </a>
  <select id="choose-city" data-native-menu="false" tabindex="-1">
    <option>Caracas</option>
    <option>Warszawa</option>
    <option>Yekaterinburg</option>
    <option>Pretoria</option>
  </select>
  <div id="choose-city-listbox-placeholder" style="display: hidden;"></div>
</div>
<div id="choose-city-listbox-screen" class="ui-popup-screen ui-screen-hidden ui-overlay-inherit"></div>
<div id="choose-city-listbox-popup" class="ui-popup-container ui-popup-hidden ui-popup-truncate">
  <div id="choose-city-listbox" class="ui-selectmenu ui-popup ui-body-inherit ui-overlay-shadow ui-corner-all">
    <div class="ui-header" ui-bar-inherit ui-screen-hidden">
      <h1 class="ui-title"></h1>
    </div>
    <ul id="choose-city-menu" class="ui-selectmenu-list ui-listview" role="listbox" aria-labelledby="choose-city-button">
      <li data-option-index="0" data-icon="false" class="ui-first-child" role="option" aria-selected="true">
        <a href="#" tabindex="-1" class="ui-btn ui-btn-active">Caracas</a>
      </li>
      <li data-option-index="0" data-icon="false" role="option" aria-selected="false">
        <a href="#" tabindex="-1" class="ui-btn ui-btn-active">Warszawa</a>
      </li>
      <li data-option-index="0" data-icon="false" role="option" aria-selected="false">
        <a href="#" tabindex="-1" class="ui-btn ui-btn-active">Yekaterinburg</a>
      </li>
      <li data-option-index="0" data-icon="false" class="ui-last-child" role="option" aria-selected="false">
        <a href="#" tabindex="-1" class="ui-btn ui-btn-active">Pretoria</a>
      </li>
    </ul>
  </div>
</div>