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

頁面動(dòng)畫：

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

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

data-transition 參數(shù)表：

參數(shù)說明

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

slideup 從底部向上滑入

slidedown 從上向下滑入

pop 從中心漸顯展開

fade 漸顯

flip 翻轉(zhuǎn)

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

模態(tài)對(duì)話框

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

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

這個(gè)頁面切換效果同樣可以使用標(biāo)準(zhǔn)頁面的 data-transition 參數(shù)效果。建議使用pop、slideup 和flip參數(shù)以達(dá)到更好的效果。

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

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

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

工具條

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

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

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

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

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

標(biāo)題容器

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

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

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

<h1>page title</h1>

</div>

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

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

例如：

復(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>

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

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

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

頁腳容器

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

例如：

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

<h4>footer content</h4>

</div>

與標(biāo)題容器相比頁腳容器有

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