這篇文章是使用 jQuery Mobile 與 HTML5 開發(fā) Web App 系列的第二篇，在本文以及接下來的數(shù)篇文章 Kayo 將會介紹 jQuery Mobile 的組件、事件響應(yīng)以及可以調(diào)用的方法，而作為該系列的第一篇文章，Kayo 將會先介紹 jQuery Mobile 的基本情況和一些基礎(chǔ)的實例。

?

一.jQuery Mobile 的漸進(jìn)增強(qiáng)設(shè)計與瀏覽器支持

在 上一篇文章 中， Kayo 簡單介紹了漸進(jìn)增強(qiáng)設(shè)計的概念，可以參考文中的第四點內(nèi)容。而 jQuery Mobile 雖然是一些新 web 技術(shù)（ HTML5、CSS3 和 JavaScript ）的產(chǎn)物，但對于不能提供以上技術(shù)支持的設(shè)備也會盡量提供最好的體驗。

?

根據(jù)維基百科（ Wikipedia ） 的解釋，漸進(jìn)增強(qiáng)的設(shè)計主要包括以下幾點

  • basic content should be accessible to all web browsers （所有瀏覽器都應(yīng)能訪問全部基礎(chǔ)的內(nèi)容）
  • basic functionality should be accessible to all web browsers （所有瀏覽器都應(yīng)能訪問全部基礎(chǔ)的功能）
  • sparse, semantic markup contains all content （所有的內(nèi)容應(yīng)該在少量語義標(biāo)簽內(nèi)）
  • enhanced layout is provided by externally linked CSS （增強(qiáng)的功能應(yīng)該由外部 CSS 提供）
  • enhanced behavior is provided by unobtrusive, externally linked JavaScript （增強(qiáng)的行為由外部 JavaScript 提供 ）
  • end-user web browser preferences are respected （終端用戶的瀏覽器習(xí)慣應(yīng)受尊重）

?

因為 jQuery Mobile 使用了漸進(jìn)增強(qiáng)的設(shè)計理念，因而它所支持的系統(tǒng)與平臺也很廣泛，能提供 A 級支持（支持全部的增強(qiáng)的體驗，包括基于 Ajax 的動畫頁面轉(zhuǎn)場）的有以下平臺：

Apple iOS 3.2-5.0

Android 2.1-2.3 , 3.1, 4.0

Windows Phone 7-7.5

Blackberry 6.0 , 7

Blackberry Playbook 1.0-2.0

Palm WebOS 1.4-2.0 , 3.0

Firebox Mobile (10 Beta)

Skyfire 4.1

Opera Mobile 11.5

Meego 1.2

Samsung bada 2.0

Kindle 3 and Fire

Nook Color 1.4.1

Chrome Desktop 11-17

Firefox Desktop 4-9

Internet Explorer 7-9

Opera Desktop 10-11

?

注：若在實際的開發(fā)中使用到 Web SQL Database 等 HTML5 技術(shù)，則最終的 Web App 被支持度會比以上 jQuery Mobile 的被支持度低，但兩個主流的移動瀏覽器 Android 與 Apple iOS 的系統(tǒng)瀏覽器及其桌面版本肯定能提供最好的支持。

?

二.HTML5 data-* 屬性

jQuery Mobile 依賴 HTML5 data-* 屬性 來提供一系列的支持（ UI 組件、過渡和頁面結(jié)構(gòu)），不支持該 HTML5 屬性的瀏覽器會默認(rèn)忽略這些屬性的效果，比如在頁面中添加一個版頭，可以使用以下的 HTML： 

          <div data-role="header">
    <h1>jQuery Mobile Demo</h1>
</div>

?

這樣就能產(chǎn)生一個 jQuery Mobile 樣式的版頭，從下文的圖中可以看出，這樣的版頭樣式很適合移動設(shè)備使用，并且在添加 data-role="header" 屬性后，div 內(nèi)的 h1 也會被渲染成一定樣式，這就是 jQuery Mobile 的方便快捷，也是它的設(shè)計宗旨—— Write Less, Do More 。

?

除此之外 jQuery Mobile 中還有以下的 data-role 屬性（部分屬性），已經(jīng)賦予了一定的樣式及用戶操作響應(yīng)效果。

?

data-role="content" ， data-role="button" ， data-theme ="" , data-role="controlgroup" ， data-inline="true" ， data-role="fieldcontain" ， data-role="listview" ， data-rel="dialog" ， data-transition="pop" ，分別對應(yīng)著主體內(nèi)容、按鈕，主題顏色，已編輯按鈕，內(nèi)聯(lián)按鈕，表單元素，列表視圖，對話框，頁面過渡。

?

三.jQuery Mobile 基本使用方法

?

1.引入 jQuery Mobile

使用 jQuery Mobile ，需要在網(wǎng)頁頁眉中引入 jQuery Mobile 組件，包括以下部分

jQuery 庫

jQuery Mobile CSS

jQuery Mobile 庫

?

可以通過這樣的 head 引入以上組件 

          <head>
    <title>jQuery Mobile Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>

?

2.加入 viewport

在 Android 的瀏覽器中，若沒有設(shè)定頁面寬度，它會認(rèn)為頁面寬度是 980px ，因此我們可以在 head 里加入一個 viewport，讓移動瀏覽器知道屏幕大小，只是一個 viewport 標(biāo)簽，就已經(jīng)給用戶帶來更好的體驗。 

          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5">

?

3.簡單的頁面實例

在引入 jQuery Mobile 需要的組件后，我們可以創(chuàng)建 jQuery Mobile 頁面，下面給出一個簡單的例子。 

          <!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
 
<body>
 
<div data-role="page" id="home">
 
    <div data-role="header">
        <h1>jQuery Mobile Demo</h1>
    </div>
 
    <div data-role="content">
        <p>主體內(nèi)容</p>
    </div>
 
    <div data-role="footer">
        <h2>Footer</h2>
    </div>
 
</div>
 
</body>
</html>

?

使用 jQuery Mobile 與 HTML5 開發(fā) Web App (二) —— jQuery Mobile 基礎(chǔ)

?

對于 jQuery Mobile ，每定義一個 data-role="page" 就相當(dāng)于一個頁面， jQuery Mobile 默認(rèn)采用 Ajax 的方式操作 DOM，自動隱藏除第一個頁面外的所有頁面，當(dāng)點擊鏈接，鏈接到其他頁面時會以 Ajax 的方式加載新頁面的內(nèi)容，下面給出完整實例。另外，我們還可以使用一些 HTML5 的語義化標(biāo)簽，如 header 的 div 可以直接使用 header 標(biāo)簽，具體的可以參見下面的例子。 

          <!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
 
<body>
 
<div data-role="page" id="home">
 
    <header data-role="header">
        <h1>jQuery Mobile Demo</h1>
    </header>
 
    <div data-role="content">
        <a href="#page2" data-role="button">列表頁面</a>
    </div>
 
    <footer data-role="footer">
        <h2>Footer</h2>
    </footer>
 
</div>
 
<div data-role="page" id="page2">
 
    <header data-role="header">
        <h1>jQuery Mobile Demo</h1>
    </header>
 
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li><a href="#home">回到首頁</a></li>
            <li><a href="#home">回到首頁</a></li>
            <li><a href="#home">回到首頁</a></li>
        </ul>
    </div>
 
    <footer data-role="footer">
        <h2>Footer</h2>
    </footer>
 
</div>
 
</body>
</html>

?

完整實例 Demo （建議使用 PC 上的 Firefox、Chrome 等現(xiàn)代瀏覽器和 IE9+ 或 Android , iPhone/iPad 的系統(tǒng)瀏覽器瀏覽）

使用 jQuery Mobile 與 HTML5 開發(fā) Web App (二) —— jQuery Mobile 基礎(chǔ)

?

原文由 Kayo Lee 發(fā)表，原文鏈接： http://kayosite.com/web-app-by-jquery-mobile-and-html5-foundation.html