這篇文章是使用 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