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

頁面動畫：

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

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

data-transition 參數(shù)表：

參數(shù)說明

slide 從右側向左滑入頁面

slideup 從底部向上滑入

slidedown 從上向下滑入

pop 從中心漸顯展開

fade 漸顯

flip 翻轉

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

模態(tài)對話框

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

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

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

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

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

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

工具條

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

工具條分為:標題（header bar）,頁腳（footer bar）和導航（nav bar）這三中應用。

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

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

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

標題容器

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

結構代碼：

復制代碼代碼如下:<div data-role=header>

<h1>page title</h1>

</div>

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

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

例如：

復制代碼代碼如下:<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)：

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

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

頁腳容器

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

例如：

復制代碼代碼如下:<div data-role=footer>

<h4>footer content</h4>

</div>

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

更多信息請查看IT技術專欄