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"屬性。

標題容器

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

代碼如下: <div data-role="header">
<h1>Page Title</h1>
</div>

為了方便頁面的交互在頁面切換後會在標題容器的左側自動生成一個後退按鈕，這樣可以簡化我們的開發復雜程度，但是有些時候我們會因為應用的需求而不需要這個後退按鈕，可以在標題容器上添加 data-backbtn="false"屬性用來阻止後退按鈕的自動創建。
標題容器的左側和右側分別可以放置一個按鈕，在阻止自動生成的後退按鈕後，我們就可以在後退按鈕的位置來自定義按鈕了。
例如：

  代碼如下: <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"屬性來實現，或者通過擴展的方式實現：

  代碼如下: $.mobile.page.prototype.options.backBtnText = "previous"

如果你沒有使用標准的結構來創建標題區域，那麼框架將不會自動生成默認的按鈕。

 

頁腳容器

頁腳容器的結構和標題容器的結構基本相同，只要把 data-role 屬性的參數設置為”footer”。
例如：
代碼如下:

<div data-role="footer">
<h4>Footer content</h4>
</div>

與標題容器相比頁腳容器有更多的靈活度，它不會想標題容器一樣只允許放置兩個按鈕，並且也不會默認的把按鈕放置在左右的頂端，頁腳的按鈕默認是從左到右依次排列的，並且何以放置更多的按鈕。
在頁腳容器上只要添加一個 class="ui-bar"就可以將頁腳變成一個工具條，你可以不用設置任何的布局樣式就可以在其中添加整齊的按鈕。
例如：

代碼如下: <div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="delete">Remove</a>
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>

如果我們需要一組鏈接效果，我們可以這樣寫：

代碼如下: <div data-role="footer" class="ui-bar" data-position="inline">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-icon="delete">Remove</a>
<a href="index.html" data-icon="plus">Add</a>
<a href="index.html" data-icon="arrow-u">Up</a>
<a href="index.html" data-icon="arrow-d">Down</a>
</div>
</div>

技巧：通過使用 data-id 屬性可以讓多個頁面使用相同的頁腳。

 

導航

導航容器是一個可以每行容納最多 5 個按鈕的按鈕組控件，用一個擁有 data-role="navbar"
屬性的 div 來容納這些按鈕。
例子：
 

代碼如下: <div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->

在默認的按鈕上添加 class="ui-btn-active"
如果按鈕的數量超過 5 個，導航容器將會自動以合適的數量分配成多行顯示。

 

按鈕

你可以將頁面中的任何一個鏈接通過 data-role="button"來聲明成為按鈕的顯示風格。為了風格統一，框架會在頁面加載時自動將 form 類的按鈕格式化為 jQuery Mobile 風格的按鈕，不需要添加 data-role 屬性。
框架中包含了一組常用的圖標可以用於按鈕，用 data-icon 屬性中的參數來定義顯示不同的圖標效果。
例如：

代碼如下: <a href="index.html" data-role="button" data-icon="delete">Delete</a>

data-icon 原生參數列表

 

除了可以默認顯示左側的圖標之外，還可以用 data-iconpos 屬性來定義圖標與文字的位置關系。
data-iconpos 參數列表：

參數效果：
right 圖標在文字的右側
top 圖標在文字上面
bottom 圖標在文字下面
data-iconpos="notext"屬性可以讓按鈕隱藏文字。

內聯樣式

在框架中默認情況下按鈕是橫向獨占根據屏幕寬度橫向自適應的，但是我們在應用的應用中經常需要在一行中顯示多個按鈕，這時候我們就需要知道一個新的叫做內聯模式的屬性了
data-inline="true"。
例如：
 

代碼如下: <div data-inline="true">
<a href="index.html" data-role="button">Cancel</a>
<a href="index.html" data-role="button" data-theme="b">Save</a>
</div>

 
按鈕組