AMP

amp-selector

表示一种控件,可显示选项菜单并让用户从中选择。

必需的脚本 <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
支持的布局 所有
示例 请参阅 AMP By Example 的 amp-selector 示例

行为

AMP 选择器是一种控件,可显示一系列选项并让用户从中选择一个或多个选项;选项内容不只局限于文本。

  • amp-selector 可以包含任意 HTML 元素或 AMP 组件(如 amp-carouselamp-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 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="">None of the Above</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 操作属性,然后使用 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 By Example 上的在线演示。

属性

<amp-selector> 上的属性

disabled、form、multiple、name 上述属性的行为方式与在标准 HTML 元素上的行为方式相同 select .
keyboard-select-mode `keyboard-select-mode 属性用于指定 amp-selector 内的选项的键盘导航行为。
  • none(默认值):可使用 Tab 键在 amp-selector 内的各项内容之间切换焦点。用户必须按 Enter 键或空格键,才能更改所选内容。箭头键处于停用状态。
  • focus:按 Tab 键可将焦点放在 amp-selector。用户可以使用箭头键在各项内容之间切换。必须按空格键或 Enter 键,才能更改所选内容。
  • select:按 Tab 键可将焦点放在 amp-selector。用户使用箭头键切换选项时,所选内容会发生变化。

<amp-selector> 选项的属性

option 指定选项可供选择。如果已指定值,则该值的内容会随表单一起提交。
disabled、selected 上述属性的行为方式与在标准 HTML 元素上的行为方式相同 [option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option).

事件

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

详细了解 AMP 操作和事件

select amp-selector 会在用户选择某个选项时触发 select 事件。多选择器和单选择器会在用户选择或取消选择选项时触发此事件。点按处于停用状态的选项不会触发 select 事件。
  • event.targetOption 包含所选元素的 option 属性值。
  • event.selectedOptions 包含所有所选元素的 option 属性值的数组。

验证

请参阅 AMP 验证工具规范中的 amp-selector 规则

需要更多帮助?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub