#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
RU
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文 Polski Tiếng việt

Important: this documentation is not applicable to your currently selected format ads!

amp-selector

Description

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

Required Scripts

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

Supported Layouts

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

Скрипт <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
Поддерживаемые макеты Все
Примеры Пример amp-selector на сайте AMP By Example.

Поведение

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

  • Элемент amp-selector может содержать любые элементы HTML или компоненты AMP (например, amp-carousel, amp-img и т. п.).
  • Элемент amp-selector не может содержать вложенные элементы amp-selector.
  • Доступные для выбора варианты определяются добавлением в элемент атрибута option и присвоением ему некоторого значения, например <li option='value'></li>.
  • Недоступные варианты определяются добавлением в элемент атрибута disabled, например <li option='d' disabled></li>.
  • Выбранные по умолчанию варианты определяются добавлением в элемент атрибута selected, например <li option='b' selected></li>.
  • Чтобы разрешить множественный выбор, добавьте в элемент amp-selector атрибут multiple. По умолчанию в элементе amp-selector можно выбрать только один вариант.
  • Чтобы отключить весь элемент amp-selector, добавьте в него атрибут disabled.
  • Если элемент amp-selector в теге form содержит атрибут name и если пользователь отправляет форму (т. е. происходит событие submit), то элемент amp-selector ведет себя, как группа переключателей или флажков и отправляет значения, выбранные для варианта.

Пример:

<form id="form1" action="/" method="get" target="_blank">
  <amp-selector name="single_image_select" layout="container">
    <ul>
      <li><amp-img src="/img1.png" width="50" height="50" option="1"></amp-img></li>
      <li><amp-img src="/img2.png" width="50" height="50" option="2"></amp-img></li>
      <li option="na" selected="">Ничего из перечисленного</li>
    </ul>
  </amp-selector>
  <amp-selector name="multi_image_select" layout="container" multiple="">
    <amp-img src="/img1.png" width="50" height="50" option="1"></amp-img>
    <amp-img src="/img2.png" width="50" height="50" option="2"></amp-img>
    <amp-img src="/img3.png" width="50" height="50" option="3"></amp-img>
  </amp-selector>
  <amp-selector name="multi_image_select_1" layout="container" multiple="">
    <amp-carousel id="carousel-1" width="200" height="60" controls="">
      <amp-img src="/img1.png" width="80" height="60" option="a"></amp-img>
      <amp-img src="/img2.png" width="80" height="60" option="b" selected=""></amp-img>
      <amp-img src="/img3.png" width="80" height="60" option="c"></amp-img>
      <amp-img src="/img4.png" width="80" height="60" option="d" disabled=""></amp-img>
    </amp-carousel>
  </amp-selector>
</form>

<p><amp-selector name="multi_image_select_2" layout="container" multiple="" form="form1">
  <amp-carousel height="300" id="carousel-1" type="slides" width="400" controls="">
    <amp-img height="60" src="/img1.png" width="80" option="a"></amp-img>
    <amp-img height="60" src="/img2.png" width="80" option="b" selected=""></amp-img>
    <amp-img height="60" src="/img3.png" width="80" option="c"></amp-img>
    <amp-img height="60" src="/img4.png" width="80" option="d"></amp-img>
  </amp-carousel>
</amp-selector>

Отмена выделения

Чтобы отменить все выделения при нажатии на элемент, используйте атрибут действия on в элементе и укажите идентификатор id селектора AMP с методом clear.

Пример:

<button on="tap:mySelector.clear">Clear Selection</button>
<amp-selector id="mySelector" layout="container" multiple>
  <div option>Option One</div>
  <div option>Option Two</div>
  <div option>Option Three</div>
</amp-selector>

AMP By Example.

Атрибуты

Атрибуты элемента <amp-selector>

disabled, form, multiple, name Эти атрибуты работают так же, как в стандартных элементах HTML select.
keyboard-select-mode Атрибут keyboard-select-mode определяет поведение клавиатуры для вариантов внутри amp-selector.
  • Значение none (по умолчанию): клавиша Tab переключает фокус между элементами в amp-selector. Пользователь должен нажать Ввод или Пробел, чтобы изменить выбор. Клавиши со стрелками не работают.
  • Значение focus: клавиша Tab переключает фокус на amp-selector. Для перемещения между элементами используются клавиши со стрелками. Чтобы изменить выбор, нужно нажать Пробел или Ввод.
  • Значение select: клавиша Tab переключается фокус на amp-selector. Выбранные элементы меняются, когда пользователь переходит между ними с помощью клавиш со стрелками.

Атрибуты вариантов элемента <amp-selector>

option Означает, что вариант доступен для выбора. Если указано значение, оно передается вместе с формой.
disabled, selected Эти атрибуты работают так же, как в стандартных элементах HTML option.

События

События могут активировать действия для компонентов AMP с помощью атрибута on, например on="select: my-tab.show".

Подробнее о действиях и событиях AMP…

select Элемент amp-selector активирует событие select, когда пользователь выбирает какой-то вариант. Селекторы множественного и одиночного выбора активируют его при выборе или отмене выбора того или иного варианта. При нажатии на варианты, недоступные для выбора, событие select не происходит.
  • Параметр event.targetOption содержит значение атрибута option выбранного элемента.
  • Параметр event.selectedOptions содержит массив со значениями атрибута option выбранных элементов.

Валидация

С правилами для компонента amp-selector можно ознакомиться в спецификации валидатора AMP.

Требуется дополнительная помощь?

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

Перейти на Stack Overflow
Нашли ошибку или недостающую функцию?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Перейти на GitHub