">文档：<amp-selector> - amp.dev - AMP 框架
AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-selector

 
您现在可以使用此组件在有效的 AMP 文档外部使用此组件的 Bento 版本。在 Bento 指南 中了解更多信息。

描述

表示一个控件，该控件显示一个选项菜单，并允许用户从中进行选择。

 

必需脚本

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

支持的布局

用法

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，请向 amp-selector 元素添加 disabled 属性。
  • 当 amp-selector 包含 name 属性且 amp-selector 位于 form 标记内时，如果在表单上发生提交事件，则 amp-selector 会像单选按钮/复选框组一样，并根据 amp-selector 的名称提交选定的值（分配给选项的值）。

示例

<form action="/" method="get" target="_blank" id="form1">
  <amp-selector layout="container" name="single_image_select">
    <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>None of the Above</li>
    </ul>
  </amp-selector>
  <amp-selector layout="container" name="multi_image_select" 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 layout="container" name="multi_image_select_1" 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>
<amp-selector
  layout="container"
  name="multi_image_select_2"
  multiple
  form="form1"
>
  <amp-carousel id="carousel-1" width="400" height="300" type="slides" 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"></amp-img>
  </amp-carousel>
</amp-selector>

清除选择

若要在轻触或单击元素时清除所有选择，请在元素上设置 on 操作属性，并使用 clear 操作方法指定 AMP 选择器 id。

示例

<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 示例 查看实时演示。

属性

<amp-selector> 的属性

disabled, form, multiple, name

上述属性的行为方式与标准 HTML <select> 元素上的行为方式相同。

keyboard-select-mode

keyboard-select-mode 属性决定了 <amp-selector> 内选项的键盘导航行为。

  • `none`（默认）：Tab 键在 `` 中的项目之间切换焦点。用户必须按 Enter 或空格键才能更改选择。箭头键已禁用。
  • `focus`：Tab 键将焦点赋予 ``。用户可以使用箭头键在项目之间导航。必须按空格键或 Enter 键才能更改选择。
  • `select`：Tab 键将焦点赋予 ``。当用户使用箭头键在选项之间导航时，选择会发生更改。

<amp-selector> 选项的属性

option

表示该选项可选择。如果指定了值，则值的内容将随表单一起提交。

disabled, selected

上述属性的行为方式与标准 HTML <option> 元素中的行为方式相同。

活动

事件可以使用 on 属性触发其他 AMP 组件上的操作。例如，on="select: my-tab.show"

详细了解 AMP 操作和事件。

select

当用户选择一个选项时，amp-selector 会触发 select 事件。多选器和单选器在选择或取消选择选项时会触发此事件。轻触已禁用的选项不会触发 select 事件。

  • `event.targetOption` 包含所选元素的 `option` 属性值。
  • `event.selectedOptions` 包含所有选定元素的 `option` 属性值的数组。

验证

请参阅 AMP 验证器规范中的 amp-selector 规则。

需要更多帮助吗？

您已经阅读了本文档十多次，但它并没有真正涵盖您的所有问题？也许其他人也有同样的感觉：在 Stack Overflow 上联系他们。

转到 Stack Overflow
发现了一个错误或缺少一个功能？

AMP 项目强烈鼓励您参与和做出贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您对您特别热衷的问题做出一次性贡献。

转到 GitHub