Google Material Design 學習02 - 頁籤 | 進擊的網頁前端技術！ - 點部落

2014-07-07

Google Material Design 學習02 - 頁籤

2081
0

摘要:Google Material Design 學習02 - 頁籤

<paper-tabs>

<paper-tab> .... </paper-tab>

</paper-tabs>

頁籤元件使用非常方便，由於封裝的效果，整個程式碼精簡的不得了。

來看看怎麼實現下面這個例子，這個例子很簡單，按下 [頁籤] 後就可以動態切換顯示的圖片，如下圖

範例連結: Link

HTML

顯示一組頁籤和一張圖

<paper-tabs selected="0" id="q">

<paper-tab>圖 1</paper-tab>

<paper-tab>圖 2</paper-tab>

<paper-tab>圖 3</paper-tab>

</paper-tabs>

JavaScript

當polymer初始化完成後，註冊onclick事件，直接取得點選的頁籤數字後設定src就完成了

$(document).on('polymer-ready', function() {

q.onclick = function(e){

image.src = images[q.selected];

}

});

HTML、JavaScript為什麼可以寫的如此簡單?

這是由於Polymer實現了WebComponent規範，所以<paper-tabs>這個元素除了HTML應有的api (例如onclick) 外，還擁有 selected 這個擴充的屬性(其實還有很多，可直接看EZoApp工具上的屬性面板就知道了)，因此只要paper-tabs註冊onclick，就可以直接取得目前使用者點選第幾個頁籤，所以就可以直接設定圖片了。

簡單的說，由於WebComponent概念，所有Paper元件都可以直接用元素API來操控，而且支援雙向綁定。也就是說如果javascript這樣寫

q.selected = 0;

你就會發現頁籤會跳回第0個，真是太方便了....Orz

回首頁