お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

amp-selector

セレクターです。selectタグと何が違うかって所ですが、selectタグは文字に対してこれは画像でもいけるようになるのです。
偉いっ

プラグインの読み込み

amp-selectorを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。

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

基本構文と動作

どんな書き方でどんな動きすんのかを。まず簡単なものを。

<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>

うん、まぁ見たまんまって感じですがw
子要素のamp-img部分、ここにoptionプロパティがあったりしますね。その辺でなんとなく察せそうですが
プロパティと動作についてみていきます。

デモ

デモ

amp-selectorのプロパティ

layout 共通プロパティでやったlayoutと同じです。
name なまえ。selectタグのnameと同じと考えてOKです。
multiple これもselectと同じ感じ、複数選択しましょう!
disabled 説明いりますかねw選択不可です。

amp-selector、itemのプロパティ

option selectでのoptionタグのvalueと考えて下さい。
この記述がある要素がselectでのoptionであると定義されます。
disabled 選択不可ー!!!
selected 選択済み♡

選択全解除

<a href="javascript:void(0);" on="tap:mySelector.clear">Clear Selection</a>
<amp-selector id="mySelector" layout="container" multiple>
  <div option="1">Option One</div>
  <div option="2">Option Two</div>
  <div option="3">Option Three</div>
</amp-selector>

こんな感じで全選択解除ができたりもします。
使いそうにもないですが一応