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

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

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

一.jQuery Mobile 的漸進增強設計與瀏覽器支持
根據維基百科（ Wikipedia ） 的解釋，漸進增強的設計主要包括以下幾點

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

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

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

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

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

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

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" ，分別對應著主體內容、按鈕，主題顏色，已編輯按鈕，內聯按鈕，表單元素，列表視圖，對話框，頁面過渡。

三.jQuery Mobile 基本使用方法
1.引入 jQuery Mobile
使用 jQuery Mobile ，需要在網頁頁眉中引入 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 的瀏覽器中，若沒有設定頁面寬度，它會認為頁面寬度是 980px ，因此我們可以在 head 里加入一個 viewport，讓移動瀏覽器知道屏幕大小，只是一個 viewport 標簽，就已經給用戶帶來更好的體驗。

<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>主體內容</p>
  </div>
 
  <div data-role="footer">
    <h2>Footer</h2>
  </div>
 
</div>
 
</body> 
</html>

2016517163442696.png (335×365)

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

<!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），雖然本質上作為一個站點，內容才是用戶需要的，但我們仍需要使用良好的 UI 與 UE 來作為內容與用戶的連接，因此我們引入 jQuery Mobile 來為 Web App 制作 UI 與交互。

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

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

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

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

2.漸進式設計

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

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

相關文章

最新評論