HTML5+JS手機web開發之jQuery Mobile初涉

1、起始之語

我一直都是在PC上折騰網頁的，這會兒怎麼風向周邊搗鼓起手機網頁開發呢？緣由是公司原先使用Java開發的產品，耗了很多人力財力，可是最後的效果卻不怎麼好。由於，Android系統一套東西，iPhone又是新的一套，折騰死人吶。

因而總監發狠，讓我把手上的活都交出去，專心折騰web版的，看看最後效果如何。

加上我覬覦手機上的開發學習好久了，因而，一拍即合，搞起了手機開發方面的學習。

分享是很好的提升自身學習的方法。由於分享過程當中梳理了所學，每每會有些意想不到的心得與收穫。如此利人利已的事情，天然樂意爲之。因而，本身在文章id > 2000 的這一歷史性時刻，新建了一個「mobile相關」的分類目錄，把移動相關的一些東西總結，整理，分享出去，你們共勉。

2、個人選擇

顯然，當下手機web開發移不開CSS3 + HTML5以及JavaScript。目前，也應運而生了不少開發的框架，有膠水層的，也有顯示層的（不羅列）。由於我的偏好以及篩選，決定使用PhoneGap實現與設備相機，通信錄等交互，jQuery Mobile實現頁面UI的顯示以及相關交互。

若是時間足夠，我想我會針對項目自己從新搞個更輕便靈活的交互框架。考慮到現實狀況，仍是決定使用他人的UI框架。

下截圖爲今兒個上午(2011-11-1 11:11)跑通的第一個PhoneGap下的Android手機程序：

不過PhoneGap是與膠水層打交道的東西，要說到這東西還須要些時日。咱們能夠先把目前投向與頁面顯示相關的UI框架上。例如，本文要提及的jQuery Mobile。

3、我眼中的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/wordpress/?p=2007