欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用jQuery Mobile框架開發(fā)移動端Web App的入門教程

 更新時間：2016年05月17日 16:40:37   作者：Kayo lee  
jQuery Mobile是移動端的基于jQuery的Web前端開發(fā)框架,移動設(shè)備上的瀏覽器對HTML5的支持普遍較強,因而jQuery Mobile的UI設(shè)計主要針對HTML5,下面就來詳細(xì)看一下使用jQuery Mobile框架開發(fā)移動端Web App的入門教程

一.jQuery Mobile 的漸進增強設(shè)計與瀏覽器支持
根據(jù)維基百科（ Wikipedia ） 的解釋，漸進增強的設(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)受尊重）

若在實際的開發(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 組件，包括以下部分
（1）jQuery 庫
（2）jQuery Mobile CSS
（3）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>

2016517163442696.png (335×365)

對于 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>

 四.開發(fā)原則
首先我們必須知道，一款優(yōu)秀的 Web App ，需要有良好的 UI 與用戶體驗（UE），雖然本質(zhì)上作為一個站點，內(nèi)容才是用戶需要的，但我們?nèi)孕枰褂昧己玫?UI 與 UE 來作為內(nèi)容與用戶的連接，因此我們引入 jQuery Mobile 來為 Web App 制作 UI 與交互。

有了 Web App 的界面，還需要數(shù)據(jù)的交互，這樣才能做出 App 。這里可以使用 PHP 等服務(wù)器腳本與 Mysql 等數(shù)據(jù)庫來為 Web App 提供數(shù)據(jù)驅(qū)動，但 Kayo 希望采用一種新的方法，也就是 HTML5 的方法，使用 HTML5 規(guī)范提供的 Web SQL Database —— 一個簡單強大的 Javascript 數(shù)據(jù)庫 API， 可以在本地數(shù)據(jù)庫中存儲數(shù)據(jù)（如內(nèi)嵌在瀏覽器中的 SQLite ），另外還可以使用 HTML5 規(guī)范中的 Storage （本地儲存） 來儲存數(shù)據(jù)，這樣就可以減少 Web App 對于網(wǎng)絡(luò)的依賴，并且整個 Web App 都是使用前端的技術(shù)完成（很震撼吧?。?/p>

最后不得不提的是 offline application cache （離線程序緩存），它也是 HTML5 的特性，允許用戶在無網(wǎng)絡(luò)連接的情況下運行 Web App，因此我們可以利用此特性制作支持離線使用的 Web App ，進一步減少 Web App 對于網(wǎng)絡(luò)的依賴。

1.響應(yīng)式設(shè)計
響應(yīng)式網(wǎng)頁設(shè)計由 Ethan Marcotte 提出，通俗點說，就是網(wǎng)站界面能夠兼容多種終端，而不是每種終端各自做一個界面。騰訊等大型網(wǎng)站都有針對不同的設(shè)備做出不同的界面，比如 3g 版，觸屏版，ipad……，這樣就會增加了很多重復(fù)的工作量，因此我們可以為網(wǎng)站漸進的設(shè)計一個界面，自動適應(yīng)不同的設(shè)備，當(dāng)然設(shè)備間的效果可以有所差距。這里 Kayo 小插一段，響應(yīng)式設(shè)計的誕生，很大程度上歸功于移動互聯(lián)網(wǎng)的發(fā)展與移動設(shè)備硬件的提升，而移動互聯(lián)網(wǎng)的發(fā)展本身也依賴于移動設(shè)備硬件的提升，因此想不斷提升的 App ，還得先要硬件廠商給力。

言歸正傳，這里提到響應(yīng)式設(shè)計的理念當(dāng)然是希望在設(shè)計 Web App 時也應(yīng)用到，而這些 jQuery Mobile 已經(jīng)為開發(fā)者預(yù)先做好， jQuery Mobile 不但默認(rèn)的 UI 樣式里已經(jīng)按響應(yīng)式設(shè)計做好，它還另外提供了一些為響應(yīng)式設(shè)計而做的方法，日后會詳細(xì)介紹。

2.漸進式設(shè)計

“前端設(shè)計時通過漸進增強功能來設(shè)計一直也是 Kayo 的設(shè)計想法，因為不同的平臺，不同的設(shè)備有著不同的 Web 環(huán)境，因此對于一些出色的前端效果很難保證在每臺設(shè)備上都呈現(xiàn)相同的效果，因此與其為了在所有設(shè)備上做到一樣的效果而降低整體的前端樣式，不如對于好的設(shè)備可以呈現(xiàn)更出色的效果，而基本的效果就兼容所有的設(shè)備。jQuery Mobile 的設(shè)計也是如此，核心的功能支持所有的設(shè)備，而較新的設(shè)備則可以獲得更為優(yōu)秀的頁面效果?！?/p>

這里使用 jQuery Mobile 的目的非常明顯，也就是使到 Web App 能盡量兼容不同的設(shè)備并且在較為先進的設(shè)備中呈現(xiàn)更加出色的表現(xiàn)，而不要為了統(tǒng)一而犧牲優(yōu)秀的設(shè)計。

相關(guān)文章

最新評論