html5各種頁面切換效果和模態對話框用法總結

這篇文章主要為大家介紹了html5各種頁面切換效果和模態對話框用法總結,較為詳細的介紹了HTML5的各種頁面元素的使用技巧,非常具有實用價值,需要的朋友可以參考下

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

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

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

data-transition 參數表：

參數說明

slide 從右側向左滑入頁面

slideup 從底部向上滑入

slidedown 從上向下滑入

pop 從中心漸顯展開

fade 漸顯

flip 翻轉

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

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

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

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

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

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

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

工具條主要用於header,footer等區域，用來支撐和實現頁面中業務功能的應用。 jQuery Mobile 提供了一個相對完整的解決方案。

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

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

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

實現方式：在標題和頁腳區域加入data-position=fixed屬性。

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

結構代碼：