資源描述：
《html各種頁(yè)面切換效果和模態(tài)對(duì)話框用法總結(jié)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。
1、★精品文檔★html5各種頁(yè)面切換效果和模態(tài)對(duì)話框用法總結(jié) 本文詳細(xì)總結(jié)了html5各種頁(yè)面切換效果和模態(tài)對(duì)話框用法。分享給大家供大家參考。具體分析如下： 頁(yè)面動(dòng)畫(huà)： data-transition屬性可以定義頁(yè)面切換是的動(dòng)畫(huà)效果?！ ±纾?lt;ahref=“index.html”data-transition=“pop”I’llpop</a data-transition參數(shù)表： 參數(shù)說(shuō)明 slide從右側(cè)向左滑入頁(yè)面 slideup從底部向上滑入 slidedown從上向下滑入
2、 pop從中心漸顯展開(kāi) fade漸顯 flip翻轉(zhuǎn) 備注：如果想要在目標(biāo)頁(yè)面中顯示后退按鈕，可以在鏈接中加入data-direction=“reverse”屬性，這個(gè)屬性和原來(lái)的data-back=“true”相同，不知道在正式版本中將會(huì)保留哪個(gè)屬性。2016全新精品資料-全新公文范文-全程指導(dǎo)寫作–獨(dú)家原創(chuàng)12/12★精品文檔★模態(tài)對(duì)話框 模態(tài)對(duì)話框是一種帶有圓角標(biāo)題欄和關(guān)閉按鈕的偽浮動(dòng)層，用于獨(dú)占事件的應(yīng)用。任何結(jié)構(gòu)化的頁(yè)面都可以用data-rel=“dialog”鏈接的方式實(shí)現(xiàn)模態(tài)對(duì)話框應(yīng)用
3、?！ ±纾?lt;ahref=“foo.html”data-rel=“dialog”O(jiān)pendialog</a 這個(gè)頁(yè)面切換效果同樣可以使用標(biāo)準(zhǔn)頁(yè)面的data-transition參數(shù)效果。建議使用”pop”、”slideup”和”flip”參數(shù)以達(dá)到更好的效果?！ ∵@個(gè)模態(tài)對(duì)話框會(huì)默認(rèn)生成關(guān)閉按鈕，用于回到父級(jí)頁(yè)面。在腳本能力較弱的設(shè)備上也可以添加一個(gè)帶有data-rel=“back”的鏈接來(lái)實(shí)現(xiàn)關(guān)閉按鈕?！ ♂槍?duì)支持腳本的設(shè)備可以直接使用href=”#”或者data-rel=“back”來(lái)實(shí)現(xiàn)
4、關(guān)閉。還可以使用內(nèi)置的”close”方法來(lái)關(guān)閉模態(tài)對(duì)話框，例如：$(‘.ui-dialog’).dialog(‘close’)?！ ∮捎谀B(tài)對(duì)話框是動(dòng)態(tài)顯示的臨時(shí)頁(yè)面，所以這個(gè)頁(yè)面不會(huì)被保存在哈希表內(nèi)，這就意味著我們講無(wú)法后退到這個(gè)頁(yè)面，例如你在A頁(yè)面中點(diǎn)擊一個(gè)鏈接打開(kāi)B對(duì)話框,操作完成并關(guān)閉對(duì)話框,然后跳轉(zhuǎn)到C頁(yè)面,這時(shí)候你點(diǎn)擊瀏覽器的后退按鈕，這時(shí)候?qū)⒒氐紸頁(yè)面，而不是B頁(yè)面?！ 」ぞ邨l 工具條主要用于”header”,”footer”2016全新精品資料-全新公文范文-全程指導(dǎo)寫作–獨(dú)家原創(chuàng)12/1
5、2★精品文檔★等區(qū)域，用來(lái)支撐和實(shí)現(xiàn)頁(yè)面中業(yè)務(wù)功能的應(yīng)用。jQueryMobile提供了一個(gè)相對(duì)完整的解決方案。 工具條分為:標(biāo)題（headerbar）,頁(yè)腳（footerbar）和導(dǎo)航（navbar）這三中應(yīng)用?！ ∑渲袠?biāo)題和頁(yè)腳在頁(yè)面中有一些不同的應(yīng)用方式，默認(rèn)工具條是以嵌入（inline）的方式定位的，這種定位方式可以實(shí)現(xiàn)最大限度的兼容性，包括在對(duì)腳本和css兼容性不佳的設(shè)備都有很好的優(yōu)化?！ ×硪环N是浮動(dòng)（fixed）定位的方式，也可以成為“靜態(tài)“定位，這種定位方式可以讓工具條始終保持在屏幕的頂部
6、或者底部。并可以接受點(diǎn)擊事件來(lái)顯示/隱藏工具條，已達(dá)到最大化利用屏幕空間的目的?！ ?shí)現(xiàn)方式：在標(biāo)題和頁(yè)腳區(qū)域加入data-position=“fixed”屬性?！ ?biāo)題容器 標(biāo)題容器是頁(yè)面頁(yè)眉區(qū)域的顯示控件，主要用來(lái)顯示標(biāo)題和主要操作的區(qū)域?！ 〗Y(jié)構(gòu)代碼： 代碼如下: <divdata-role=“header” <h1Page2016全新精品資料-全新公文范文-全程指導(dǎo)寫作–獨(dú)家原創(chuàng)12/12★精品文檔★Title</h1 </div為了方便頁(yè)面的交互在頁(yè)面切換后會(huì)在標(biāo)
7、題容器的左側(cè)自動(dòng)生成一個(gè)后退按鈕，這樣可以簡(jiǎn)化我們的開(kāi)發(fā)復(fù)雜程度，但是有些時(shí)候我們會(huì)因?yàn)閼?yīng)用的需求而不需要這個(gè)后退按鈕，可以在標(biāo)題容器上添加data-backbtn=“false”屬性用來(lái)阻止后退按鈕的自動(dòng)創(chuàng)建?！ ?biāo)題容器的左側(cè)和右側(cè)分別可以放置一個(gè)按鈕，在阻止自動(dòng)生成的后退按鈕后，我們就可以在后退按鈕的位置來(lái)自定義按鈕了?！ ±纾骸 〈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如果需要自定義默認(rèn)的后退按鈕中的文本，可以用data-back-btn-text=“previous”屬性來(lái)實(shí)現(xiàn)，或者通過(guò)擴(kuò)展的方式實(shí)現(xiàn)： 2016全新精
