使用 jQuery Mobile 與 HTML5 開發(fā) Web App (二)

quasiceo 2015-09-23

展開全文

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

博客分類：

Javascript /Jquery / Bootstrap / Web

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

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

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

根據(jù)維基百科（ Wikipedia ）的解釋，漸進(jìn)增強的設(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 （增強的功能應(yīng)該由外部 CSS 提供）
enhanced behavior is provided by unobtrusive, externally linked JavaScript （增強的行為由外部 JavaScript 提供）
end-user web browser preferences are respected （終端用戶的瀏覽器習(xí)慣應(yīng)受尊重）

因為 jQuery Mobile 使用了漸進(jìn)增強的設(shè)計理念，因而它所支持的系統(tǒng)與平臺也很廣泛，能提供 A 級支持（支持全部的增強的體驗，包括基于 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：

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 引入以上組件

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" href="http://code./mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code./jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code./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)給用戶帶來更好的體驗。

Html代碼

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

3.簡單的頁面實例

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

Html代碼

<!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" href="http://code./mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code./jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code./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 ，每定義一個 data-role="page" 就相當(dāng)于一個頁面， jQuery Mobile 默認(rèn)采用 Ajax 的方式操作 DOM，自動隱藏除第一個頁面外的所有頁面，當(dāng)點擊鏈接，鏈接到其他頁面時會以 Ajax 的方式加載新頁面的內(nèi)容，下面給出完整實例。另外，我們還可以使用一些 HTML5 的語義化標(biāo)簽，如 header 的 div 可以直接使用 header 標(biāo)簽，具體的可以參見下面的例子。

Html代碼

<!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" href="http://code./mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code./jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code./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>