iT邦幫忙

DAY 28
2

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

Material Design - 自適應(RWD)鍵盤,有這種事?

今日目標: 拿計算機元件,組裝出RWD鍵盤

自適應(RWD)網站、(RWD)圖片相信大家都聽過,但是RWD鍵盤沒聽過吧....今日就讓我們用昨日計算機的key元件、output元件,很歡樂的組裝出RWD版的Keyboard元件吧 XD

一、拿計算機元件開發新元件

這是昨日介紹的計算機案例,今天我們拿output元件、key元件組裝出英文鍵盤元件

output.html

output元件昨日有介紹過,我們今天只拿它來顯示鍵盤元件輸入的字元。

HTML標籤如下

使用output元件方式很簡單,只要設定expression屬性就可以了,如下面範例

key.html

Key元件本身已經處理好Material Design Ripple效果、按鍵字元的顯示,所以我們只要拿來改排列出英文鍵盤、加上觸發事件就可以了

將近100行程式,處理好Ripple效果,直接拿來使用,太歡樂了~

二、打造英文輸入鍵盤元件

既然是要打造RWD鍵盤,按鍵元件已經有了,接下來就是找根據容器大小,自動調整字元尺寸的元件,從軍火庫找一下沒找到,拜一下Google大神給了答案,逛官網玩Demo,感覺還蠻美好的 FlowType.js ,就是它了 ^^

[ FlowType 官網 ]

直接使用 fontRatio 就可以達到預期效果,使用方式如下

$('body').flowtype({
fontRatio : 30
});

載入指定元件與資源,由於flowtype需要jquery,所以這裡也有載入jquery.js

再來是透過template產生英文鍵盤的佈局...

HTML模板 & JavaScript

依序產生三排的英文按鍵盤列,了解後就可以自己兜想要的字元或符號

最後要fire按鍵的事件出去,這樣外部使用這鍵盤元件時,才能抓到使用者所按的按鍵資訊。

keyTap方法是搭配 html 裏面的 on-tap="{{keyTap}}" 寫法,使用者按按鍵就會觸發呼叫 keyTap function

對了,我們剛剛引進的flowtype.js,可根據元素大小,自動調整文字大小是寫在ready方法內,如下,直接套到根元素就可以了

完成 keyboard-eng.html 元件開發後,可以試玩看看

使用keyboard-eng網頁寫法

第19行 使用 keyboard-eng 元件

第22~24行 接收按鍵事件,取得按鍵資訊

[線上試玩] [github]

三、鍵盤元件+顯示元件

接下來進一步串接顯示元件,其實非常簡單,只要套上CSS,並將按鍵事件的字元送到顯示元件就可以了

第31~32行 使用顯示元件

第38~41行 接收按鍵事件,取得按鍵字元後,設定到顯示元件的expression屬性

[github]

[線上試玩]


上一篇
Material Design - 案例研究(HTML結構)
下一篇
最終還是要打包
系列文
你不能不知道的Polymer開發實戰30

尚未有邦友留言

立即登入留言