找個模仿的對象吧,我們做個類似GOMAJI的行動網頁,如何?
- 先從jQuery Mobile Quick Start Guide認識最基本的語法框架(Mobile page structure),把"Create a basic page template"與"Make a listview"兩個範本的HTML碼複製起來,用個自己習慣的編輯器來寫第一個jQuery Mobile頁面吧(來看看這個範例程式(jsfiddle) (jsbin)與結果)。 (可以稍微提一下data-* = "......"這個在HTML5新增加的屬性)
- 要變成有縮圖的ViewList,簡單的很,就是像這樣的例子,然後把原始碼裡面的相關的部分改變一下如這個範例程式(jsfiddle) (jsbin)與結果。
- 想要加上NavBar,試試看這個範例程式(jsfiddle) (jsbin)與結果。
- 來做第二、三...頁的內容(jsfiddle) (jsbin)吧,然後讓ViewList與NavBar超連結到這些內容頁面。
- 更進一步,試著將ViewList以陣列方式產生(jsfiddle) (jsbin),呈現出一樣的內容頁面 (這個例子要用到迴圈,除了介紹迴圈的語法,要對大一新生介紹迴圈概念倒是可以用公車前方呈現路線資訊跑馬燈來做介紹),但這下一步要利用資料庫產生內容的概念喔。
還有哪些行動版網站可能是用jQuery Mobile設計出來的呢? 參考看看吧...