今日目標: 拿計算機元件，組裝出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]

[線上試玩]