雖然已經在另一個單元教大家如何以 jQuery Mobile 模仿 GOMAJI 行動版網頁的設計,但沒有用到的 jQuery Mobile 語法,還是建議大家按部就班照著下列的內容學習囉。
- 10 Easy Steps to Getting Started
這篇教的十個概念是最基本也是重要的:1. Get started with jQuery Mobile basic template ; 2. Internal linked pages ; 3. External linked pages ; 4. Modal Dialog(jsfiddle)(jsbin) ; 5. Mobile Page Transitions(jsfiddle)(jsbin) ; 6. Mobile Navigation Bar ; 7. Add HTML Content ; 8. jQuery Mobile Widget ; 9. jQuery Mobile Theme Swatches ; 10. Mobile Form Elements(jsfiddle)(jsbin)
- Introduction to jQuery Mobile (IBM developerWorks) 重點擺在Summary of UI components
- jQuery Mobile Tutorial (w3school.com)整個介紹分成這樣的方式還蠻清楚的:Install ; Pages ; Transitions ; Buttons ; Icons ; Popups ; Toolbars ; Navbars ; Panels ; Collapsibles ; Tables ; Grids ; Lists ; Forms ; Themes ; Events ,不然它的 Examples 分類介紹也是蠻好的。
- jQuery Mobile Domos (官方網站)
本來就有完整的語法介紹與學習範本 (記得盡量學最新版本的喔)
對初學者來說,還是再給大家一個模仿的機會吧,本實驗室團隊在2012年參加財政部臺灣省中區國稅局「舞動奇機 觸控靈機 – APP創意設計大賽」榮獲社會組第三名的節稅經濟學這個作品的部分功能設計也在此公開給大家參考,你從這樣的作品能激發什麼想法也就動手做一個自己想做的作品呢。
- 在前述的例子中,特色之一就是以 jQuery Mobile 設計出來表單操作介面更適合手機操作需求,將來大家也一定會用到這樣的的設計,就來做一兩個簡單的練習吧。假設你已經大致瞭解 jQuery Mobile Form Elements,然後參考 Set JavaScript Form Action 這個例子(jsfiddle)搞懂如何處理在按下submit之後的 Javascript HTML Input 要處理哪些動作,而最後改寫成jQuery Mobile的版本(jsfiddle)(jsbin)。懂了這個例子之後,應該可以找找看BMI計算公式讓自己寫一個小小的BMI計算器吧。(其他更進一步的表單撰寫技巧就自行參考 FormGet網站的更多範例 )
接下來就靠你們自己去學囉,提供下列教學網頁與影片,大概只要認真投入學習一個月吧,相信大家就能做個有規模的行動網頁或App了。
- jQuery Mobile邊做邊學系列影片
- jQuery Mobile開發 (MSDN邊做邊學系列)
- Archives For jQuery Mobile (LinuxAcadememy.com Blog)
p.s. 如果你已經迫不及待想把自己的網頁打包成APP,倒是有個捷徑,用EZoApp平台試試看吧(詳見這份簡報)。