一、起始之語
我一直都是在PC上折騰網頁的，這會兒怎麼風向周邊搗鼓起手機網頁開發呢？原因是公司原先使用Java開發的產品，耗了不少人力財力，但是最後的效果卻不怎麼好。因爲，Android系統一套東西，iPhone又是新的一套，折騰死人吶。
於是總監發狠，讓我把手上的活都交出去，專心折騰web版的，看看最後效果如何。
加上我覬覦手機上的開發學習很久了，於是，一拍即合，搞起了手機開發方面的學習。
分享是很好的提高自身學習的方法。因爲分享過程中梳理了所學，往往會有些意想不到的心得與收穫。如此利人利已的事情，自然樂意爲之。於是，自己在文章id > 2000 的這一歷史性時刻，新建了一個“mobile相關”的分類目錄，把移動相關的一些東西總結，整理，分享出去，大家共勉。
二、我的選擇
顯然，當下手機web開發移不開CSS3 + HTML5以及JavaScript。目前，也應運而生了很多開發的框架，有膠水層的，也有顯示層的（不羅列）。因爲個人偏好以及篩選，決定使用PhoneGap實現與設備相機，通訊錄等交互，jQuery
Mobile實現頁面UI的顯示以及相關交互。
如果時間足夠，我想我會針對項目本身重新搞個更輕便靈活的交互框架。考慮到現實情況，還是決定使用他人的UI框架。
下截圖爲今兒個上午(2011-11-1 11:11)跑通的第一個PhoneGap下的Android手機程序：
不過PhoneGap是與膠水層打交道的東西，要說到這東西還需要些時日。我們可以先把目前投向與頁面顯示相關的UI框架上。例如，本文要說起的jQuery Mobile。
三、我眼中的jQuery Mobile
目前爲止，jQuery Mobile的正式版還沒有出來，但是這並不妨礙對其的使用。官方首頁上說其代碼輕量(lightweight code)。可能跟Sencha
Touch相比確實輕量。但是，在我看來（本身爲框架的原因），其實代碼還是蠻囉嗦的（例如CSS文件min後有49K之多）。對於實際的項目而言，皮膚風格不可能幾種並存的，所以，其a~e的五種模板選擇實際有些多餘，很多都是打醬油的命。
而且，實際項目中的設計師設計東東的時候不可能是總是跟着jQuery Mobile的UI來的。因此，我們難免會碰到對其模板進行修改或是新添加的情況。
不過，我可以確信的是，如果在個人網站或是其他一些非對外的中小項目上使用jQuery Mobile的話，一定會爽歪的！
然後，還有一點我得承認。jQuery Mobile的上手可比Sencha
Touch快多了。其UI顯示基本上就是基於HTML5的data-自定義屬性來的，跟它的老爸爸jQuery一樣，確實是write less, do more.
頁面元素的UI顯示完全可以根據HTML代碼內容和屬性而來，不需要任何額外的JavaScript代碼或是CSS代碼，有模有樣的手機頁面效果就可以出爐。而且，要出效果頁面，你只要靜下心花個1整天的時間把官方的介紹文檔看一篇就可以了。真這麼簡單。
例如下面這個純顯示的頁面們（PC建議使用Chrome瀏覽器圍觀）。
您可以狠狠地點擊這裏：jQuery Mobile的UI展示頁面
手機可以訪問以下地址：http://www.zhangxinxu.com/jq/mobile/
這是在桌面版opera 10.1 mobile下的顯示效果：
默認進入：
選擇“文章搜索”項 → 點擊搜索框後：
如果是在Android系統或是iPhone上，漸變效果，平滑切換效果都會顯露出來的。
上面加起來差不多有10多個HTML頁面，搗鼓了幾個小時就出來的，當然是在無敵模式下。爲什麼快呢？因爲基本上沒有動一點新的CSS代碼或是JavaScript代碼。直接write HTML即可。如果你對jQuery Mobile熟悉的話，可以更快。
語義化
要想使用jQuery Mobile，很重要的一點就是要注意語義化。到不是使用HTML5之類的標籤（考慮到漸進增強，jQuery
Mobile使用的還是XHTML時代的標籤），而是div, p, ul,li, h1~6等的使用。
在jQuery Mobile標籤下，不同的標籤所對應的UI效果很多都已經定死了。例如：
<div data-role="header">
<h1>鑫空間-鑫生活</h1>
<a href="#" data-icon="arrow-r" data-iconpos="right">中文</a>
</div>
上面這段data-role爲header的div中，h1標籤不僅僅是個標題了，而是直接會修改當下頁面的title值，因此，上面幾行代碼對應的頁面的title就是“鑫空間-鑫生活”，即使你頭部的title寫的是“今天是小光棍節，呼啦啦~~”。
而後面的a標籤文字雖然沒有指定data-role="button"，但是，誰叫他生在data-role="header"的div下呢，於是，它就是個顯示按鈕的命。而且，JMobile自動將其定位到右側了。
語義化的標籤決定了其位置，顯示等。確實方便，但是有所限制。可謂有利有弊。
還有列表li標籤中的第一個圖片，會自動變成列表縮略圖等，好多好多，你試一下就會發現這東西還是挺有意思的。
嘛，不過嗎，不用急，冰凍三尺非一日之寒，什麼東西都是慢慢積累的。纔剛開始，說多了未必是好。所以，本文就嘮叨這麼多。
原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2007