html5各種頁面切換效果和模態(tài)對話框用法總結(jié)

2020-03-24 18:22:37

字體：大中小

供稿：網(wǎng)友

本文詳細總結(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
與標題容器相比頁腳容器有更多的靈活度，它不會想標題容器一樣只允許放置兩個按鈕，并且也不會默認的把按鈕放置在左右的頂端，頁腳的按鈕默認是從左到右依次排列的，并且何以放置更多的按鈕。
在頁腳容器上只要添加一個 >例如：

復(fù)制代碼代碼如下: div data-role="footer"
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
如果我們需要一組鏈接效果，我們可以這樣寫：

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：詳談HTML中script標簽（附代碼）

下一篇：html下拉菜單怎么做