這篇文章是使用 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 ,每定義一個 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)瀏覽器瀏覽)
?
原文由 Kayo Lee 發(fā)表,原文鏈接: http://kayosite.com/web-app-by-jquery-mobile-and-html5-foundation.html
使用 jQuery Mobile 與 HTML5 開發(fā) Web App (二) —— jQuery Mobile 基礎(chǔ)
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
