本文詳細(xì)總結(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)
備注:如果想要在目標(biāo)頁面中顯示后退按鈕,可以在鏈接中加入 data-direction="reverse"屬性,這個屬性和原來的 data-back="true"相同,不知道在正式版本中將會保留哪個屬性。
模態(tài)對話框
模態(tài)對話框是一種帶有圓角標(biāo)題欄和關(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>
這個頁面切換效果同樣可以使用標(biāo)準(zhǔn)頁面的 data-transition 參數(shù)效果。建議使用"pop"、"slideup" 和"flip"參數(shù)以達(dá)到更好的效果。
這個模態(tài)對話框會默認(rèn)生成關(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 提供了一個相對完整的解決方案。
工具條分為:標(biāo)題(header bar),頁腳(footer bar)和導(dǎo)航(nav bar)這三中應(yīng)用。
其中標(biāo)題和頁腳在頁面中有一些不同的應(yīng)用方式,默認(rèn)工具條是以嵌入(inline)的方式定位的,這種定位方式可以實現(xiàn)最大限度的兼容性,包括在對腳本和 css 兼容性不佳的設(shè)備都有很好的優(yōu)化。
另一種是浮動(fixed)定位的方式,也可以成為“靜態(tài)“定位,這種定位方式可以讓工具條始終保持在屏幕的頂部或者底部。并可以接受點擊事件來顯示/隱藏工具條,已達(dá)到最大化利用屏幕空間的目的。
實現(xiàn)方式:在標(biāo)題和頁腳區(qū)域加入 data-position="fixed"屬性。
標(biāo)題容器
標(biāo)題容器是頁面頁眉區(qū)域的顯示控件,主要用來顯示標(biāo)題和主要操作的區(qū)域。
結(jié)構(gòu)代碼:
頁腳容器
頁腳容器的結(jié)構(gòu)和標(biāo)題容器的結(jié)構(gòu)基本相同,只要把 data-role 屬性的參數(shù)設(shè)置為”footer”。
例如:
導(dǎo)航
導(dǎo)航容器是一個可以每行容納最多 5 個按鈕的按鈕組控件,用一個擁有 data-role="navbar"
屬性的 div 來容納這些按鈕。
例子:
按鈕
你可以將頁面中的任何一個鏈接通過 data-role="button"來聲明成為按鈕的顯示風(fēng)格。為了風(fēng)格統(tǒng)一,框架會在頁面加載時自動將 form 類的按鈕格式化為 jQuery Mobile 風(fēng)格的按鈕,不需要添加 data-role 屬性。
框架中包含了一組常用的圖標(biāo)可以用于按鈕,用 data-icon 屬性中的參數(shù)來定義顯示不同的圖標(biāo)效果。
例如:
除了可以默認(rèn)顯示左側(cè)的圖標(biāo)之外,還可以用 data-iconpos 屬性來定義圖標(biāo)與文字的位置關(guān)系。
data-iconpos 參數(shù)列表:
參數(shù)效果:
right 圖標(biāo)在文字的右側(cè)
top 圖標(biāo)在文字上面
bottom 圖標(biāo)在文字下面
data-iconpos="notext"屬性可以讓按鈕隱藏文字。
內(nèi)聯(lián)樣式
在框架中默認(rèn)情況下按鈕是橫向獨占根據(jù)屏幕寬度橫向自適應(yīng)的,但是我們在應(yīng)用的應(yīng)用中經(jīng)常需要在一行中顯示多個按鈕,這時候我們就需要知道一個新的叫做內(nèi)聯(lián)模式的屬性了
data-inline="true"。
例如:
jQuery Mobile 框架可以將幾個按鈕以組的方式顯示,data-role="controlgroup"用以展示按鈕間的緊湊關(guān)系。例如:
表單應(yīng)用
jQuery Mobile 框架為原生的 html 表單元素封裝了新的表現(xiàn)形式,對觸屏設(shè)備的操作進(jìn)行了優(yōu)化。在框架的頁面中會自動將 form 元素渲染成 jQuery Mobile 風(fēng)格的元素。
form 元素的使用和默認(rèn)的 html 方式使用相同,可以同樣使用 Post 和 get 方式提交數(shù)據(jù),但是需要注意的是元素的 ID 命名問題,在常規(guī)的規(guī)范中同一個頁面中是不允許出現(xiàn)相同的 ID命名的,在 jQuery Mobile 中由于其允許在同一個 DOM 中存在多個頁面,所以建議 form 元素的 ID 命名在整個項目中是唯一的,防止由于 ID 問題引發(fā)的錯誤。
默認(rèn)情況下框架會自動渲染在標(biāo)準(zhǔn)頁面中的 form 元素的風(fēng)格,一旦成功渲染后,這個控件元素將可以使用 jQuery 中的函數(shù)進(jìn)行操作。在某些情況下,我們需要使用 html 原生的 form 元素,為了阻止 mobile 框架對該元素的自動渲染,在框架中我們在 data-role 屬性中引入了一個控制參數(shù)”none”。使用這個屬性參數(shù)就會讓該元素以 html 原生的狀態(tài)顯示。
例如:
信息列表是開發(fā)應(yīng)用中使用頻率相對比較高的控件,用于數(shù)據(jù)顯示、導(dǎo)航, 數(shù)據(jù)列表等。為了適應(yīng)不同的信息內(nèi)容,列表的表現(xiàn)形式也多種多樣。
列表的代碼結(jié)構(gòu)是以有序和無序列表來實現(xiàn)的,只要在 ul 或 ol 上聲明 data-role="listview"就可以讓框架以列表的方式渲染了,例如:
希望本文所述對大家的HTML5程序設(shè)計有所幫助。
標(biāo)簽:蚌埠 黃山 內(nèi)蒙古 德州 辛集 楊凌 鶴崗 撫順
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《html5各種頁面切換效果和模態(tài)對話框用法總結(jié)》,本文關(guān)鍵詞 html5,各種,頁面,切換,效果,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。