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>
こんな感じで全選択解除ができたりもします。
使いそうにもないですが一応