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-selector>
disabled, form, multiple, name | Эти атрибуты работают так же, как в стандартных элементах HTML select [](https://developer.mozilla.org/en/docs/Web/HTML/Element/select). |
keyboard-select-mode | Атрибут keyboard-select-mode определяет поведение клавиатуры для вариантов внутри amp-selector .
|
Атрибуты вариантов элемента <amp-selector>
option | Означает, что вариант доступен для выбора. Если указано значение, оно передается вместе с формой. |
disabled, selected | Эти атрибуты работают так же, как в стандартных элементах HTML [option ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option). |
События
События могут активировать действия для компонентов AMP с помощью атрибута on
,
например on="select: my-tab.show"
.
Подробнее о действиях и событиях AMP…
select | Элемент amp-selector активирует событие select , когда пользователь выбирает какой-то вариант. Селекторы множественного и одиночного выбора активируют его при выборе или отмене выбора того или иного варианта. При нажатии на варианты, недоступные для выбора, событие select не происходит.
|
Валидация
С правилами для компонента amp-selector можно ознакомиться в спецификации валидатора AMP.
Вы читали этот документ десятки раз, но так и не нашли ответов на все свои вопросы? Возможно, другие люди столкнулись с такой же проблемой — обратитесь к ним на Stack Overflow.
Перейти на Stack Overflow Нашли ошибку или недостающую функцию?Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.
Перейти на GitHub