/ Work

[jQuery note.] 初探 jQuery Mobile 的筆記

首先,如果可以的話,先看看官方的說明吧!

http://jquerymobile.com/demos/1.0a1/

官方有說,所有的內容與結構都是基於 W3C 的 WAI-ARIA 為準,所以在要做這個之前,還是先得去翻閱一次那些規格等等的文件。因為跟一般的 HTML 有相當的落差,所以其實要上手最快的方式,還是直接去挖官方的 Code 回來參考是比較快的(喂)!附帶一提的是,眼尖的人應該會發現 WAI-ARIA 還是處於 Draft 的狀態(IE 表示:不要問,很恐怖)。

官方所提供的簡易頁面範例在這裡:http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-pages.html

另外,可以使用 Ajax 的方式來讀取頁面,關於這個,是這次筆記的主要項目之一。官方當然也是有寫文件出來啦,但是實在是 落落長一篇,有耐心的人可以慢慢看完!大致上的重點是:

  • 使用 location.hash

    jQuery Mobile 動態讀取的方式,利用 #hash 來紀錄目前所在頁面,並將目標頁面以 ajax 的方式讀取到目前的資料結構中。他會自動在 <head> 的地方加入 <base> 這個標籤,用以標定目前存取的基準目錄。這有一個好處,可以讓你所讀取進來的頁面,不會因為從外部讀入而導致內容中的鍊結失效。不過,個人認為,其缺點是,你要讀取的頁面內容,路徑必須搞清楚!

  • 由於使用了 所以,提供了三個 function 給開發者使用,分別是:

  • getBaseURL,取得 的 href 屬性值。

  • setBaseURL,設定 的 href 屬性值。

  • resetBaseURL,重設 的 href 屬性值。

  • 可以利用 URL 動態產生頁面。說穿了就是,你可以使用特定(指定)的 ID 來呼叫其他頁面,然後將頁面自動產出在目標區塊內。

  • 如果你不要用 Ajax 讀取(我可以後略嗎)?

    (後略...)

  • 表單傳送,預設會使用 Ajax 的方式去傳送。有一個地方需要留意,他的回應會覆蓋你原本是 content 的地方!

  • 非預設環境的限制(IE 表示:...),就是在莫名狀況下的限制(喂):

  • 當鍊結目標是一個目錄,請務必加上 /(slash),至於原因,jQuery 表示:不要問,很恐怖。因為是使用 / 來擷取 的目錄節點(預設最後一個 / 後面是檔案) ,所以目標若非檔案,請務必加上 /(slash)。

  • 任何被讀取的獨立頁面(結構),都必需要放在 page 元件內。

  • 此外,其他非獨立使用的頁面(結構),都必須放置在 page 元件外,以防任何腳本(script)被重複執行。

  • ui-page 元件的 hash 值可以隨便你用(喂),預設儲存在 jQuery.mobile.subPageUrlKey。

接著,我要怎麼畫出 jQuery Mobile 的畫面呢?基本上這一點在 jQuery Mobile 官方 Docs 上是不告訴你的呦(疑疑疑)。整個 DOM 的結構,基本上還是得回到 WAI-ARIA 的文件裡面才行,這整個 jQuery Mobile framework 都是基於 WAI-ARIA 的設定與規範做出來的(沒有誤)。

網路上有沒有相關文章?有,請看:

把玩過後,其實在應用上,jQuery 確實是把製作 Mobile 所需的元素給變簡單了。不過,你也必須清楚的了解 WAI ARIA 的基本規則就是。

附上測試畫面。