成人美女免费网站视频,色在线免费观看,日韩黄色一区

在《使用 jQuery Mobile 與 HTML5 開發(fā) Web App —— jQuery Mobile 基礎(chǔ) 》中，Kayo 曾經(jīng)簡略介紹過 jQuery Mobile 的頁面組件，當(dāng)時(shí)只是舉了一個(gè)簡單的例子說明一下頁面組件的情況，本文將會(huì)拓展說明頁面組件的具體細(xì)節(jié)。

?

一.頁面基礎(chǔ)

在 jQuery Mobile 中，頁面這個(gè)概念與傳統(tǒng)的 Web 頁面有一個(gè)很大的區(qū)別 —— jQuery Mobile 中的頁面可以是單個(gè)的頁面，也可以是一個(gè)頁面中內(nèi)嵌多個(gè) "Page" ，“Page” 是 jQuery Mobile 中的頁面，下面將會(huì)為大家詳細(xì)介紹它。

Page 是 jQuery Mobile 的重要組成部分，由 data-role="page" 屬性產(chǎn)生，每個(gè) Page 由之前介紹過的 header , content , footer 組成，但這些元素并不是必須的，不過一個(gè)完整的頁面最好同時(shí)都有這些元素。下面舉一個(gè)例子，這也是《使用 jQuery Mobile 與 HTML5 開發(fā) Web App —— jQuery Mobile 基礎(chǔ) 》中的例子，為了方便大家閱讀，這里重新例舉一次。

          <!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 網(wǎng)站必須使用 HTML5 的文檔聲明，使得這個(gè)網(wǎng)站能適用 HTML5 的特性，不支持這些特性的瀏覽器會(huì)安全地靜默忽略 HTML5 的文檔聲明和一些屬性。

HTML5 文檔聲明：

          <!DOCTYPE html>

在頁面 head 內(nèi)，使用了 viewport 的 meta 標(biāo)簽控制了頁面的縮放，例子中的 width=device- width, initial-scale=1 即控制頁面寬度等于屏幕寬度，頁面縮放比例為 1 ，這樣瀏覽器就不會(huì)隨意縮放頁面了。

?

二.多頁面結(jié)構(gòu)

如上面所說，一個(gè)頁面中可以內(nèi)嵌多個(gè) Page ，每個(gè) Page 需要一個(gè) ID 標(biāo)記，頁面間通過 “#ID” 的鏈接方式跳轉(zhuǎn)，除第一個(gè) Page 外，其他 Page 會(huì)使用隱藏起來，當(dāng)鏈接被點(diǎn)擊時(shí)， jQuery Mobile 會(huì)跳轉(zhuǎn)到相應(yīng)的 Page ，這個(gè)過程會(huì)以 Ajax 的方式完成，把新頁面的內(nèi)容加載到 DOM 中。

下面是一個(gè)多頁面結(jié)構(gòu)的代碼參考：

          <!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 src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.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">
 
    </div>
 
    <div data-role="footer">
        <h2>Demo By <a  target="_blank" style="text-decoration: none; ">Kayo</a></h2>
    </div>
</div>
 
<div data-role="page" id="page-2">
 
        <div data-role="header">
            <h1>Page 2</h1>
        </div><!-- /header -->
 
        <div data-role="content">
  
        </div>
 
        <div data-role="footer">
            <h2>Demo By <a  target="_blank" style="text-decoration: none; ">Kayo</a></h2>
        </div>
 
</div>
 
<div data-role="page" id="page-3">
 
        <div data-role="header">
            <h1>Page 3</h1>
        </div><!-- /header -->
 
        <div data-role="content">    
   
        </div>
 
        <div data-role="footer">
            <h2>Demo By <a  target="_blank" style="text-decoration: none; ">Kayo</a></h2>
        </div>
 
</div>
 
</body> 
</html>

?

三.Ajax 驅(qū)動(dòng)的站點(diǎn)

jQuery Mobile 默認(rèn)會(huì)以 Ajax 的方式構(gòu)建網(wǎng)站和應(yīng)用，因此，同一域名下的所有頁面的跳轉(zhuǎn)都會(huì)轉(zhuǎn)為 Ajax 請(qǐng)求，并會(huì)配合 CSS3 動(dòng)畫作為頁面跳轉(zhuǎn)的過場。之所以采用這樣的機(jī)制，一方面是因?yàn)橐苿?dòng)設(shè)備所能用的網(wǎng)絡(luò)速度相對(duì) PC 來說會(huì)較低， Ajax 可以減少跳轉(zhuǎn)到新頁面所需的帶寬，另一方面， Ajax 配合 CSS3 動(dòng)畫能做出原生 App 的用戶體驗(yàn)。如：當(dāng)用戶點(diǎn)擊一個(gè)鏈接時(shí)， jQuery Mobile 會(huì)分析該 url ，產(chǎn)生 Ajax 請(qǐng)求，并顯示一個(gè)正在加載的提示框，避免了刷新整個(gè)頁面。若該次 Ajax 請(qǐng)求成功，則會(huì)把新內(nèi)容加載到 DOM 中，初始化所有組件，并顯示頁面過場動(dòng)畫。若請(qǐng)求失敗，則會(huì)顯示一個(gè)錯(cuò)誤提示框，并在幾秒后消失。

另外，帶有 rel="external" 屬性的鏈接不會(huì)通過 Ajax 方式加載，跳轉(zhuǎn)時(shí)整個(gè)頁面會(huì)被刷新。若需指定某個(gè)鏈接不需要 Ajax ，也可以為該鏈接添加 data-ajax="false" 屬性，這樣的鏈接也不會(huì)使用 Ajax 。關(guān)于 Ajax 的內(nèi)容， Kayo 會(huì)在介紹配置 jQuery Mobile 時(shí)詳細(xì)介紹。

?

四.頁面轉(zhuǎn)場

jQuery Mobile 為自帶有一套基于 CSS3 的轉(zhuǎn)場效果，你可以為任何能觸發(fā)頁面跳轉(zhuǎn)的鏈接添加 data-transition 屬性來調(diào)整轉(zhuǎn)場動(dòng)畫效果。這些效果基于 CSS3 的 transitions ，某些移動(dòng)平臺(tái)對(duì) transitions 的支持并不足夠，如果你的頁面在轉(zhuǎn)場時(shí)出現(xiàn)閃爍的情況， Kayo 建議你在 CSS 中加入下面這一條 CSS 規(guī)則：

          .ui-page { -webkit-backface-visibility: hidden; }

另外，若需要頁面翻轉(zhuǎn)等 3D 效果，瀏覽器必須支持 3D transforms ，若不支持(如安卓 2.x 系列)，則會(huì)退化為淡出淡入的效果。

默認(rèn)情況的轉(zhuǎn)場效果是“fade”，即淡出淡入，若需要自定義轉(zhuǎn)場效果，可以使用 data-transition 屬性，如把轉(zhuǎn)場效果改為“pop（彈出）”：

          <a href="#page2" data-role="button" data-transition="pop">dialog</a>

該屬性的具體取值可以查看本文末的完整 Demo，里面列舉了 data-transition 所有可取值。

小補(bǔ)充：控制轉(zhuǎn)場寬度：當(dāng)轉(zhuǎn)場頁面的寬度過大時(shí)，翻轉(zhuǎn)等 3D 效果可能會(huì)過度消耗系統(tǒng)資源，因此開發(fā)者可以使用 $.mobile.maxTransitionWidth 控制轉(zhuǎn)場最大寬度，超過該寬度則不使用轉(zhuǎn)場動(dòng)畫。 $.mobile.maxTransitionWidth 是配置 jQuery Mobile 默認(rèn)值的方法，因?yàn)楸容^復(fù)雜，將會(huì)另外寫文章詳解，這里列出該方法僅供有經(jīng)驗(yàn)的開發(fā)者參考。

?

五.對(duì)話框

如下面的例子，為 Page 添加 data-rel="dialog" 屬性，可以把頁面表現(xiàn)為對(duì)話框的形式——增加圓角，外邊距，陰影和遮罩層。

          <a href="#page-2" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a>

對(duì)話框也是一個(gè) Page ，因此也有轉(zhuǎn)場效果，不過默認(rèn)的效果是“slide”，即滑動(dòng)出現(xiàn)。

需要注意的是，對(duì)話框通常作為輔助頁面的用途（如登錄框，提示框），因此 jQuery Mobile 不會(huì)在歷史記錄的哈希值里記錄對(duì)話框。

?

六.jQuery Mobile 導(dǎo)航模型

看了上面的文字，也許你會(huì)對(duì)其中的內(nèi)容感到迷惑！的確，jQuery Mobile 作為一套完善的移動(dòng)前端解決方案，它的處理機(jī)制會(huì)比較復(fù)雜。這里 Kayo 介紹一下 jQuery Mobile 的導(dǎo)航模型，也就是 jQuery Mobile 的基本工作流程，了解完整的工作流程更有助于童鞋們理解上面的內(nèi)容。

當(dāng)一個(gè) jQuery Mobile 文檔被打開時(shí)，Page 容器被請(qǐng)求，插入到頁面的 DOM 中，若頁面中有多個(gè) Page ，則會(huì)插入多個(gè) Page ，但只有第一個(gè) Page 在頁面上會(huì)被直接顯示，其他 Page 會(huì)隱藏起來，直到用戶點(diǎn)擊相應(yīng)的鏈接才會(huì)以 Ajax 的方式跳轉(zhuǎn)到另一個(gè) Page 。

這就是 jQuery Mobile 導(dǎo)航的簡單描述，jQuery Mobile 也就是在頁面間跳轉(zhuǎn)并處理 DOM 的，而這套機(jī)制都是基于 location.hash 屬性的。當(dāng) jQuery Mobile 加載完第一個(gè)頁面時(shí)，它會(huì)以頁面相對(duì)于 url 的完整路徑產(chǎn)生 hash 值，Ajax 不改變當(dāng)前 url ，而改變 hash 值則可以保證當(dāng)前 url 能表示當(dāng)前的頁面，如我們從 index.html 跳轉(zhuǎn)到管理頁面，則 url 也會(huì)更新為 index.html#admin（假設(shè)管理頁面與主頁在同一個(gè) HTML 文檔中并且 id 為 admin），這樣這個(gè) url 就能表示當(dāng)前頁面，若我們需要收藏這個(gè)頁面，直接收藏即可。

于是最后就有了上面所說的 Ajax 驅(qū)動(dòng)機(jī)制——當(dāng)用戶點(diǎn)擊一個(gè)非外部鏈接時(shí)，hash 值發(fā)生變化，同時(shí) jQuery Mobile 阻止鏈接的默認(rèn)行為，并以 Ajax 的方式引入新內(nèi)容，當(dāng)新內(nèi)容成功返回時(shí)更新 location.hash 的值，從而更新 url 。

現(xiàn)在整個(gè)導(dǎo)航模型以及 jQuery Mobile 的基本工作原理都已很清晰了，接下來再補(bǔ)充一點(diǎn)。在 jQuery Mobile 頁面的 head 中，加入了一個(gè) base 標(biāo)簽，該標(biāo)簽的值指向當(dāng)前頁面資源（圖片，css，js）的正確獲取路徑，當(dāng)頁面變化時(shí)，base 的值也會(huì)作出相應(yīng)的變化。

這里科普一下 base 標(biāo)簽，下面引用 w3school 對(duì) base 標(biāo)簽的解釋：

[bq]
<base> 標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。
通常情況下，瀏覽器會(huì)從當(dāng)前文檔的 URL 中提取相應(yīng)的元素來填寫相對(duì) URL 中的空白。
使用 <base> 標(biāo)簽可以改變這一點(diǎn)。瀏覽器隨后將不再使用當(dāng)前文檔的 URL，而使用指定的基本 URL 來解析所有的相對(duì) URL。這其中包括 <a>、<img>、<link>、<form> 標(biāo)簽中的 URL。
[/bq]

?

七.預(yù)讀取與緩存頁面

開發(fā)者可以通過 data-prefetch 屬性預(yù)讀取一個(gè)頁面，這樣當(dāng)你打開一個(gè)文檔時(shí)，可以為另外一個(gè)文檔在本文檔中的鏈接添加 data-prefetch 來預(yù)先讀取它，這個(gè)文檔通常是用戶很有可能點(diǎn)擊的頁面，這樣對(duì)于提升用戶體驗(yàn)具有不錯(cuò)的效果。

那為什么不直接把兩頁面放在同一個(gè)文檔中呢？

因?yàn)槿绻押芏嗟?Page 放在一個(gè)文檔中，這個(gè)文檔的 DOM 會(huì)變得很大，這樣對(duì)于一些性能較差的移動(dòng)設(shè)備來說會(huì)造成壓力，預(yù)讀取的方式則可以減少這種壓力。

比如我們需要緩存 page2.html （注意跟上面的 #page2 區(qū)分開來，這里的 page2.html 是獨(dú)立的一個(gè) HTML 文檔），只需要在跳轉(zhuǎn)到 page2.html 的鏈接上添加 data-prefetch 屬性：

          <a href="Page2.html" data-prefetch>Page2</a>

但這仍然會(huì)有問題， jQuery Mobile 會(huì)通過 Ajax 的方式加載頁面，這樣一旦點(diǎn)擊的頁面多了，DOM 將會(huì)變得很大，于是 jQuery Mobile 還做了一個(gè)機(jī)制來應(yīng)對(duì)這個(gè)情況——當(dāng)一個(gè)頁面通過 Ajax 加載到 DOM 中后，jQuery Mobile 會(huì)標(biāo)記這個(gè)頁面，當(dāng)導(dǎo)航到其他頁面時(shí)，這個(gè)頁面會(huì)從 DOM 中移除，從而保持 DOM 的干凈。這個(gè)機(jī)制只適用于 Ajax 加載的其他文檔的頁面，同一頁面的多個(gè) Page 通過 Ajax 顯示/隱藏并不適用于這個(gè)機(jī)制。

若需要緩存某個(gè)頁面，以便用戶從其他頁面重新回到該頁面時(shí)可以快速瀏覽可以使用 data-dom-cache="true" 屬性：

如需要緩存上面例子中的 page2.html

          <a href="Page2.html" data-prefetch data-dom-cache="true">Page2</a>

一旦緩存頁面會(huì)使 DOM 變得很大，建議開發(fā)者在網(wǎng)站上線前進(jìn)行足夠的測試。

?

八.其他

多 Page 頁面中雖然把第一個(gè)容器加載作為第一個(gè)頁面，但實(shí)際上所有 Page 是同時(shí)存在于同一個(gè)文檔中，因此需要注意保持頁面中容器的 ID 唯一。

jQuery Mobile 通過 Ajax 請(qǐng)求頁面，但它只會(huì)將新頁面的 body 內(nèi)容插入到 DOM 中，這意味著 head 部分引用的 js 對(duì)新內(nèi)容無效，因此 Kayo 建議在每一個(gè)頁面都引用相同的 js ，即把所有的 js 都寫到同一文件中并在 head 中引用，并且這些 js 中用到的效果最好使用 live, delegate 等持續(xù)性方法匹配到元素中，這樣 js 中的效果對(duì)通過 Ajax 引入的新元素也有效。當(dāng)然，jQuery Mobile 中的 js 的所有方法都已經(jīng)采用了相似的辦法使到其對(duì)新元素也有效。當(dāng)然，開發(fā)者也可以使用 pagecreate() 的方法為某一個(gè)頁面指定一個(gè) js ，關(guān)于這個(gè)方法會(huì)在另外的文章中介紹。

?

九.完整 Demo

完整實(shí)例 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-page-dialog.html

使用 jQuery Mobile 與 HTML5 開發(fā) Web App (九) —— jQuery Mobile 頁面與對(duì)話框

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

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

【本文對(duì)您有幫助就好】元

2元

5元

10元

20元

自定義

欧美三区_成人在线免费观看视频_欧美极品少妇xxxxⅹ免费视频_a级毛片免费播放_鲁一鲁中文字幕久久_亚洲一级特黄

?