本文詳細總結(jié)了html5各種頁面切換效果和模態(tài)對話框用法。分享給大家供大家參考。具體分析如下：

頁面動畫：

data-transition 屬性可以定義頁面切換是的動畫效果。

例如：<a href=index.html data-transition=pop>i'll pop</a>

data-transition 參數(shù)表：

參數(shù)說明

slide 從右側(cè)向左滑入頁面

slideup 從底部向上滑入

slidedown 從上向下滑入

pop 從中心漸顯展開

fade 漸顯

flip 翻轉(zhuǎn)

備注：如果想要在目標頁面中顯示后退按鈕，可以在鏈接中加入 data-direction=reverse屬性，這個屬性和原來的 data-back=true相同，不知道在正式版本中將會保留哪個屬性。

模態(tài)對話框

模態(tài)對話框是一種帶有圓角標題欄和關(guān)閉按鈕的偽浮動層，用于獨占事件的應(yīng)用。任何結(jié)構(gòu)化的頁面都可以用 data-rel=dialog鏈接的方式實現(xiàn)模態(tài)對話框應(yīng)用。

例如：<a href=foo.html data-rel=dialog>open dialog</a>

這個頁面切換效果同樣可以使用標準頁面的 data-transition 參數(shù)效果。建議使用pop、slideup 和flip參數(shù)以達到更好的效果。

這個模態(tài)對話框會默認生成關(guān)閉按鈕，用于回到父級頁面。在腳本能力較弱的設(shè)備上也可以添加一個帶有 data-rel=back的鏈接來實現(xiàn)關(guān)閉按鈕。

針對支持腳本的設(shè)備可以直接使用 href=”#”或者 data-rel=back來實現(xiàn)關(guān)閉。還可以使用內(nèi)置的”close”方法來關(guān)閉模態(tài)對話框，例如：$('.ui-dialog').dialog('close')。

由于模態(tài)對話框是動態(tài)顯示的臨時頁面，所以這個頁面不會被保存在哈希表內(nèi)，這就意味著我們講無法后退到這個頁面，例如你在 a 頁面中點擊一個鏈接打開 b 對話框,操作完成并關(guān)閉對話框,然后跳轉(zhuǎn)到 c 頁面,這時候你點擊瀏覽器的后退按鈕，這時候?qū)⒒氐?a 頁面，而不是 b 頁面。

工具條

工具條主要用于”header”,”footer”等區(qū)域，用來支撐和實現(xiàn)頁面中業(yè)務(wù)功能的應(yīng)用。jquery mobile 提供了一個相對完整的解決方案。

工具條分為:標題（header bar）,頁腳（footer bar）和導(dǎo)航（nav bar）這三中應(yīng)用。

其中標題和頁腳在頁面中有一些不同的應(yīng)用方式，默認工具條是以嵌入（inline）的方式定位的，這種定位方式可以實現(xiàn)最大限度的兼容性，包括在對腳本和 css 兼容性不佳的設(shè)備都有很好的優(yōu)化。

另一種是浮動（fixed）定位的方式，也可以成為“靜態(tài)“定位，這種定位方式可以讓工具條始終保持在屏幕的頂部或者底部。并可以接受點擊事件來顯示/隱藏工具條，已達到最大化利用屏幕空間的目的。

實現(xiàn)方式：在標題和頁腳區(qū)域加入 data-position=fixed屬性。

標題容器

標題容器是頁面頁眉區(qū)域的顯示控件，主要用來顯示標題和主要操作的區(qū)域。

結(jié)構(gòu)代碼：

復(fù)制代碼代碼如下:<div data-role=header>

<h1>page title</h1>

</div>

為了方便頁面的交互在頁面切換后會在標題容器的左側(cè)自動生成一個后退按鈕，這樣可以簡化我們的開發(fā)復(fù)雜程度，但是有些時候我們會因為應(yīng)用的需求而不需要這個后退按鈕，可以在標題容器上添加 data-backbtn=false屬性用來阻止后退按鈕的自動創(chuàng)建。

標題容器的左側(cè)和右側(cè)分別可以放置一個按鈕，在阻止自動生成的后退按鈕后，我們就可以在后退按鈕的位置來自定義按鈕了。

例如：

復(fù)制代碼代碼如下:<div data-role=header data-position=inline data-backbtn=false >

<a href=index.html data-icon=delete>cancel</a>

<h1>edit contact</h1>

<a href=index.html data-icon=check>save</a>

</div>

如果需要自定義默認的后退按鈕中的文本，可以用data-back-btn-text=previous屬性來實現(xiàn)，或者通過擴展的方式實現(xiàn)：

復(fù)制代碼代碼如下:$.mobile.page.prototype.options.backbtntext = previous

如果你沒有使用標準的結(jié)構(gòu)來創(chuàng)建標題區(qū)域，那么框架將不會自動生成默認的按鈕。

頁腳容器

頁腳容器的結(jié)構(gòu)和標題容器的結(jié)構(gòu)基本相同，只要把 data-role 屬性的參數(shù)設(shè)置為”footer”。

例如：

復(fù)制代碼代碼如下:<div data-role=footer>

<h4>footer content</h4>

</div>

與標題容器相比頁腳容器有

更多信息請查看IT技術(shù)專欄