AMP教學-Tab分頁切換

AMP教學-Tab分頁切換

有時網頁裡面會需要有分頁切換區塊內容,平常需要使用JavaScript製作,同樣在AMP中需要使用專屬套件來達成
tab示意圖

使用的元件是amp-selector ,這個元件主要是作為切換選擇控制之用。在amp-selector裡面可以包含任何html和amp元件,但不能再包含 amp-selector(選擇區域裡面不能再選擇)。
amp-selector可以達成如區塊(或圖片輪播、按鈕)選擇與清除,或是做為選項選擇鈕,在許多地方都可以用到。這次著重在如何製作出分頁切換功能,若需要更詳細的解說可參考amp-selector文件

這次我們使用amp-selector來製作分頁(tab),概念上是在按鈕和區塊上各別設定id,進行呼應的事件,並且輔以css來製作出來。

載入js

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

寫入html,寫法有兩種,可以將按鈕和顯示區塊劃為同一區,或是和選擇按鈕劃分為一區,顯示區塊劃為同一區
範例寫法1-html的寫法是按鈕1+區塊1+按鈕2+區塊2+按鈕3+區塊3....
範例寫法2-html的寫法是按鈕1+按鈕2+按鈕3 和區塊1+區塊2+區塊3...

以下語法為寫法1,按鈕和區塊是在同一處,這種寫法的好處是當到手機上時,tab可以直接變成標題並緊接著內容。

<amp-selector class="tabs-with-flex"
role="tablist">
<!-- 分頁按鈕1 -->
<div id="tab1"
role="tab"
aria-controls="tabpanel1"
option
selected>Tab one</div>
<!-- 分頁區塊1 -->
<div id="tabpanel1"
role="tabpanel"
aria-labelledby="tab1">Tab one content... </div>
<!-- 分頁按鈕2 -->
<div id="tab2"
role="tab"
aria-controls="tabpanel2"
option>Tab two</div>
<!-- 分頁區塊2 -->
<div id="tabpanel2"
role="tabpanel"
aria-labelledby="tab2">Tab two content... </div>
<!-- 分頁按鈕3 -->
<div id="tab3"
role="tab"
aria-controls="tabpanel3"
option>Tab three</div>
<!-- 分頁區塊3 -->
<div id="tabpanel3"
role="tabpanel"
aria-labelledby="tab3">Tab three content... </div></amp-selector>

語法解釋

<!-- 分頁按鈕1 -->
<div id="tab1"
role="tab"
aria-controls="tabpanel1"
option
selected>Tab one</div>
<!-- 分頁區塊1 -->
<div id="tabpanel1"
role="tabpanel"
aria-labelledby="tab1">Tab one content... </div>

注意在Tab與區塊都必須要命名ID,在tab中使用 aria-controls="tabpanel1"呼應區塊1,而在區塊中使用 aria-labelledby="tab1"呼應tab
option 表示該tab可以被選擇


寫入css
css在這個套件裡面很重要,使用flex屬性讓三個div按鈕排列同一列,同時扮演著決定哪一塊按鈕出現的模樣。
主要是使用了選擇器來判斷何時按鈕要進行變化,並且開啟內容區塊,由於牽扯到許多關於css選擇器,因此更多寫法不加以著墨,可自行研究。
css寫法請參考此範例

當css加上後就可以看到效果了

參考:
Tab Panels with amp-selector
amp-selector components
amp-selector example

其他參考範例(電腦版下方有商品切換頁)
https://www.unistyle.tw/amp/

更多文章:

  1. 每個AMP頁面都必須有非AMP版本嗎?
  2. AMP教學-amp-bind 增加網頁互動
  3. AMP頁面只適合使用在靜態網站上面嗎?
  4. AMP只適合在手機裝置上觀看嗎?
  5. AMP只能在Google上面出現嗎?

回應