Do you build things with AMP? Fill out the 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