iT邦幫忙

DAY 14
6

你不能不知道的Polymer開發實戰系列 第 14

鐵人賽分享徽章又不見了? 沒關係,有產生器

今日目標: 打造鐵人賽挑戰徽章產生器

鐵人賽寫了14天,習慣每次寫完後,得到當天的挑戰徽章,就分享到FB。可是不知道是不是我的Chrome相容性不好,好幾次鐵人賽分享徽章都顯示不出來,怒!

雖然可以從FB找到ithome放徽章圖片的url,就可以拿到之前的圖片。但是還要一個個序號找自己的圖片,真是!@#%,所以怒寫這篇用Polymer打造挑戰徽章產生器

第99天挑戰達成

自定HTML標籤 <itironman-card>

name: 挑戰者id

day: 挑戰天數

h1: 參賽的主題

img: 挑戰者的圖片

圖片最好是拿ithome上面avatar的圖片,會比較一致。

如下圖,連結在 [這裏]

說好的產生器呢?

連結如下,請修改成自己要的資料

http://itironman.github.io/day14/gen.html#Marty#99#你不能不知道的Polymer開發實戰#http://ithelp.ithome.com.tw/avatars/20084199.jpg

例如: 柯P後援會

<itironman-card> 元件程式碼

由於需要用到疊套圖片,所以另外引入此元件的CSS檔案,而第12行的<content></ocntent> 標籤是polymer提供用來放外部使用 <itironman-card>時的HTML資料,如圖下所述

在程式部分,userImage、descript 資料來自于外部提供,所以使用polymer提供的callback方法 created ,此方法會在polymer完成節點插入建置完成後呼叫,我們就可以透過 this 取得外部寫的HTML標籤 (h1、img)

polymer會在整個元件完成並放到dom裡面後呼叫,在這裡我們設定外部提供的鐵人照片,並將整個content內文移除 (在這個例子我們只是拿來利用取得一些資訊)

參考資料

Polymer content 用法與觀念

Polymer post-card 範例


上一篇
來點實際應用 - 出英文考題 (電腦請評分)
下一篇
自己的英文自己救~結合VoiceTube
系列文
你不能不知道的Polymer開發實戰30
0
mis2000lab
iT邦好手 1 級 ‧ 2014-10-04 19:47:45

好強!原來可以這樣做

真了不起,謝謝分享,學到了

0
oxxo
iT邦研究生 2 級 ‧ 2014-10-04 21:16:18

太神啦!!!!

0
martyshu
iT邦研究生 1 級 ‧ 2014-10-05 11:05:39

mis2000lab
過獎了,只是解決小問題,mis2000lab一次衝兩主題令人佩服啊
IT人生很有味道,拜讀中...

oxxo.studio
我對你很景仰啊 XD

0
lulubear
iT邦新手 5 級 ‧ 2014-10-17 11:52:20

太強了!

我要留言

立即登入留言