欧美人与禽性xxxxx杂性,国产69精品久久99不卡,国产精品电影

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

?

一.jQuery Mobile 的漸進增強設計與瀏覽器支持

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

根據維基百科（ 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 （終端用戶的瀏覽器習慣應受尊重）

因為 jQuery Mobile 使用了漸進增強的設計理念，因而它所支持的系統與平臺也很廣泛，能提供 A 級支持（支持全部的增強的體驗，包括基于 Ajax 的動畫頁面轉場）的有以下平臺：

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

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

?

二.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 組件，包括以下部分

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

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

?

3.簡單的頁面實例

在引入 jQuery Mobile 需要的組件后，我們可以創建 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>

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

完整實例 Demo （建議使用 PC 上的 Firefox、Chrome 等現代瀏覽器和 IE9+ 或 Android , iPhone/iPad 的系統瀏覽器瀏覽）

原文由 Kayo Lee 發表，原文鏈接： http://kayosite.com/web-app-by-jquery-mobile-and-html5-foundation.html

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

更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義

日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利

?