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

《html各種頁面切換效果和模態(tài)對話框用法總結(jié)》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在教育資源-天天文庫。

1、★精品文檔★html5各種頁面切換效果和模態(tài)對話框用法總結(jié)　　本文詳細總結(jié)了html5各種頁面切換效果和模態(tài)對話框用法。分享給大家供大家參考。具體分析如下：　　頁面動畫：　　data-transition屬性可以定義頁面切換是的動畫效果?！　±纾?lt;ahref=“index.html”data-transition=“pop”I’llpop</a　　data-transition參數(shù)表：　　參數(shù)說明　　slide從右側(cè)向左滑入頁面　　slideup從底部向上滑入　　slidedown從上向下滑入

2、　　pop從中心漸顯展開　　fade漸顯　　flip翻轉(zhuǎn)　　備注：如果想要在目標頁面中顯示后退按鈕，可以在鏈接中加入data-direction=“reverse”屬性，這個屬性和原來的data-back=“true”相同，不知道在正式版本中將會保留哪個屬性。2016全新精品資料-全新公文范文-全程指導寫作–獨家原創(chuàng)12/12★精品文檔★模態(tài)對話框　　模態(tài)對話框是一種帶有圓角標題欄和關閉按鈕的偽浮動層，用于獨占事件的應用。任何結(jié)構(gòu)化的頁面都可以用data-rel=“dialog”鏈接的方式實現(xiàn)模態(tài)對話框應用

3、?！　±纾?lt;ahref=“foo.html”data-rel=“dialog”O(jiān)pendialog</a　　這個頁面切換效果同樣可以使用標準頁面的data-transition參數(shù)效果。建議使用”pop”、”slideup”和”flip”參數(shù)以達到更好的效果?！　∵@個模態(tài)對話框會默認生成關閉按鈕，用于回到父級頁面。在腳本能力較弱的設備上也可以添加一個帶有data-rel=“back”的鏈接來實現(xiàn)關閉按鈕?！　♂槍χС帜_本的設備可以直接使用href=”#”或者data-rel=“back”來實現(xiàn)

4、關閉。還可以使用內(nèi)置的”close”方法來關閉模態(tài)對話框，例如：$(‘.ui-dialog’).dialog(‘close’)?！　∮捎谀B(tài)對話框是動態(tài)顯示的臨時頁面，所以這個頁面不會被保存在哈希表內(nèi)，這就意味著我們講無法后退到這個頁面，例如你在A頁面中點擊一個鏈接打開B對話框,操作完成并關閉對話框,然后跳轉(zhuǎn)到C頁面,這時候你點擊瀏覽器的后退按鈕，這時候?qū)⒒氐紸頁面，而不是B頁面。　　工具條　　工具條主要用于”header”,”footer”2016全新精品資料-全新公文范文-全程指導寫作–獨家原創(chuàng)12/1

5、2★精品文檔★等區(qū)域，用來支撐和實現(xiàn)頁面中業(yè)務功能的應用。jQueryMobile提供了一個相對完整的解決方案。　　工具條分為:標題（headerbar）,頁腳（footerbar）和導航（navbar）這三中應用?！　∑渲袠祟}和頁腳在頁面中有一些不同的應用方式，默認工具條是以嵌入（inline）的方式定位的，這種定位方式可以實現(xiàn)最大限度的兼容性，包括在對腳本和css兼容性不佳的設備都有很好的優(yōu)化?！　×硪环N是浮動（fixed）定位的方式，也可以成為“靜態(tài)“定位，這種定位方式可以讓工具條始終保持在屏幕的頂部

6、或者底部。并可以接受點擊事件來顯示/隱藏工具條，已達到最大化利用屏幕空間的目的。　　實現(xiàn)方式：在標題和頁腳區(qū)域加入data-position=“fixed”屬性?！　祟}容器　　標題容器是頁面頁眉區(qū)域的顯示控件，主要用來顯示標題和主要操作的區(qū)域?！　〗Y(jié)構(gòu)代碼：　　代碼如下:　　<divdata-role=“header”　　<h1Page2016全新精品資料-全新公文范文-全程指導寫作–獨家原創(chuàng)12/12★精品文檔★Title</h1　　</div為了方便頁面的交互在頁面切換后會在標

7、題容器的左側(cè)自動生成一個后退按鈕，這樣可以簡化我們的開發(fā)復雜程度，但是有些時候我們會因為應用的需求而不需要這個后退按鈕，可以在標題容器上添加data-backbtn=“false”屬性用來阻止后退按鈕的自動創(chuàng)建。　　標題容器的左側(cè)和右側(cè)分別可以放置一個按鈕，在阻止自動生成的后退按鈕后，我們就可以在后退按鈕的位置來自定義按鈕了?！　±纾骸　〈a如下:　　<divdata-role=“header”data-position=“inline”data-backbtn=“false”　　<ahref

8、=“index.html”data-icon=“delete”Cancel</a　　<h1EditContact</h1　　<ahref=“index.html”data-icon=“check”Save</a　　</div如果需要自定義默認的后退按鈕中的文本，可以用data-back-btn-text=“previous”屬性來實現(xiàn)，或者通過擴展的方式實現(xiàn)：　　2016全新精