jQuery Mobile #1 開始建立一個新的 jQuery Mobile 專案

image

這幾天非常的慘烈,奉勸如果有想要進來開發 Mobile Web 的同好,一定要謹慎評估 Framework 的使用,話說最初我也是非常堅持在效果上,如果能做到像 app.ft.com 這種水準的網站,真的是作夢都會笑。不過最終繞了一大圈,我還是又回到了 jQuery 的懷抱。當然有非常多的原因,時程的壓力、擴充性跟可維護性、不過讓我最後下定決心的還是因為客戶希望時程內要能在 windows phone & IE 上正常瀏覽。

雖然百般無奈,但是開始用了 jQuery Mobile 三個小時之後,其實比我想像中的還要好一些。而且最重要的是,我開始懷抱過年可以賴在家看電視的夢想了。

基本 html 架構

<!DOCTYPE>
<
html>
<
head>
<
title></title>
</
head>
<
body>
<
div data-role="page">
<
div data-role="header">
</
div>
<
div data-role="content">
</
div>
<
div data-role="footer">
</
div>
</
div>
</
body>
</
html>

  • 如果要使用 jQuery Mobile 預設會需要這幾個 div 用 data-role 去設定,分別是 page,header,content,footer,有了這幾個 div 預設的動作才會正常,不然會一直呈現鬼打牆狀態,像是超連結點下去沒有反應之類的…。我第一件發現的事情是 jQuery Mobile 把全部 <a> 的動作都吃掉了(如果超連結是 http:// | https:// 開頭的不會,吃掉的是站內連結),預設會取代成 ajax loading 來做換頁的效果。
  • 使用預設的 ajax loading 的時候,載入的頁面也必須包含這幾個 div , jQuery Mobile 在背景做 loading 頁面的動作,然後把 <div data-role=”page”></div> 之間的資料做更新的動作。
  • jQuery Mobile 最大的優點就是他真的在跨瀏覽器上面做了很多的功夫,像是 pushState 還有 webkit transform 這些很不錯但是又有人不支援的功能,都有默默的判斷。如果說將來 Mobile OS 市場愈來愈多人加入戰局的話,考慮使用 jQuery Mobile 的應該也會大增。


jQuery Mobile | jQuery Mobile

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *