使用jQuery Mobile開發手機網頁

On 2011/07/14, in jQuery, by Allen J

jQuery Mobile是一套建立於jQuery與jQuery UI的基礎上
提供行動裝置跨平台的使用者介面的系統
jQuery Mobile對各種瀏覽器上的支援程度不盡相同(Mobile Graded Browser Support)
不過對Mobile網頁開發者來說
可以節省不少時間
加上jQuery Mobile提供的UI介面很友善
使用類似的技術(jQTouch、Sencha等)建構Mobile網頁
的確是方便又快速

網頁結構

jQuery Mobile的Docs and Demos有詳細說明(建議用手機瀏覽)
我大槪把結構簡化一下
直接看網頁的Body包括的內容

<div data-role="page">
	<div data-role="header">header</div>
	<div data-role="content">content</div>
	<div data-role="footer">footer</div>
</div>

在手機上看每頁的內容用div元件來建構
一個div的屬性data-role設為page代表一頁
而div(data-role="content")是必需
div(data-role="header")、div(data-role="footer")則看需求增加
這樣就完成最簡單的頁面

分頁結構

在jQuery Mobile的一個HTML網頁裡
可以寫好幾個Mobile網頁

<div data-role="page" id="p1">
	<div data-role="header">Index</div>
	<div data-role="content"><a href="#p2">首頁</a></div>
	<div data-role="footer">footer</div>
</div>

<div data-role="page" id="p2">
	<div data-role="header">Page 2</div>
	<div data-role="content">第二頁</div>
	<div data-role="footer">footer</div>
</div>

這樣的分頁結構
在jQuery Mobile是用Ajax去處理
以達到速度快、減少流量
連結<a>有分外部和內部
外部連結是指向一個新的網頁
例:<a href="multipage.html" rel="external">Multi-page link</a>
內部連結是指向此頁的某一個div(data-role="page" id="p1″)
例:<a href="#p1″>p1</a>
點連結換頁時會自動出現loading畫面
提醒瀏覽者等待
如果連結目的網頁載入錯誤
還會閃一下loadingError Loading Page畫面
而且不會換頁

但注意不支援index.html#foo這種寫法

參考資料:
跨平台手機服務開發 jQuery Mobile
使用 jQuery Mobile 快速開發 mobile 網站

標籤: 
  • So

    請教一下
    我用你說的方法, 把所有page都寫在同一個html中
    可是我打開source code看, 發現所有page的內容, 一開始就已經下載回來了
    那麼是怎樣 “用Ajax去處理
    以達到速度快、減少流量" 呢?

    • 訪客

      Ajax的技術是用在Ajax form submission
      提送表單時使用非同步傳輸的方式
      避免整個頁面重新下載
      以減少傳輸量
      這樣使用者在進行操作頁面時
      會減少等待時間
      就像Facebook大量使用Ajax技術一樣
      而且jQuery Mobile套件檔案大小也是輕量級的

      參考資料:http://mobile.tutsplus.com/tutorials/mobile-web-apps/jquery-mobile-forms/