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

1、html5各種頁面切換效果和模態(tài)對話框用法 總結(jié)本文詳細(xì)總結(jié)了 html5各種頁面切換效果和模態(tài)對話框 用法。分享給大家供大家參考。具體分析如下：頁面動畫：data-transition屬性可以定義頁面切換是的動畫效果。例如：I'll pop data-transition參數(shù)表：參數(shù)說明slide 從右側(cè)向左滑入頁面slideup 從底部向上滑入 slidedown 從上向下滑入 pop從中心漸顯展開fade 漸顯flip 翻轉(zhuǎn)備注：如果想要在目標(biāo)頁面中顯示后退按鈕，可以在鏈接中加入 data-direction="reverse" 屬性，這個屬性和原 來的dat

2、a-back="true" 相同，不知道在正式版本中將會保 留哪個屬性。模態(tài)對話框模態(tài)對話框是一種帶有圓角標(biāo)題欄和關(guān)閉按鈕的偽浮動層，用于獨占事件的應(yīng)用。任何結(jié)構(gòu)化的頁面都可以用 data-rel="dialog"鏈接的方式實現(xiàn)模態(tài)對話框應(yīng)用。例如：Open dialog這個頁面切換效果同樣可以使用標(biāo)準(zhǔn)頁面的 data-transition參數(shù)效果。建議使用"pop"、"slideup" 和"flip" 參數(shù)以達(dá)到更好的效果。這個模態(tài)對話框會默認(rèn)生成關(guān)閉按鈕，用于回到父級頁 面。在腳本能力較弱的

3、設(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頁面,這時候你點擊瀏 覽器的后退

4、按鈕，這時候?qū)⒒氐紸頁面，而不是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)“定位，這種定位方式可以讓工具條

5、始終保持在屏幕的頂 部或者底部。并可以接受點擊事件來顯示/隱藏工具條，已達(dá)到最大化利用屏幕空間的目的。實現(xiàn)方式：在標(biāo)題和頁腳區(qū)域加入data-position="fixed" 屬性。標(biāo)題容器標(biāo)題容器是頁面頁眉區(qū)域的顯示控件，主要用來顯示標(biāo)題和主要操作的區(qū)域。結(jié)構(gòu)代碼：復(fù)制代碼代碼如下：Page Title為了方便頁面的交互在頁面切換后會在標(biāo)題容器的左 側(cè)自動生成一個后退按鈕，這樣可以簡化我們的開發(fā)復(fù)雜程 度，但是有些時候我們會因為應(yīng)用的需求而不需要這個后退按鈕，可以在標(biāo)題容器上添加data-backbtn="false" 屬性用來阻止后退按鈕的自動創(chuàng)建。

6、標(biāo)題容器的左側(cè)和右側(cè)分別可以放置一個按鈕，在阻止 自動生成的后退按鈕后，我們就可以在后退按鈕的位置來自 定義按鈕了。例如：復(fù)制代碼代碼如下：CancelEdit ContactSave如果需要自定義默認(rèn)的后退按鈕中的文本，可以用 data-back-btn-text="previous"屬性來實現(xiàn)，或者通過擴(kuò)展的方式實現(xiàn)：復(fù) 制 代 碼 代 碼 如下 ：$.totype.options.backBtnText="previous"如果你沒有使用標(biāo)準(zhǔn)的結(jié)構(gòu)來創(chuàng)建標(biāo)題區(qū)域，那么框架 將不會自動生成默認(rèn)的按鈕。頁腳容器頁腳容器的結(jié)

7、構(gòu)和標(biāo)題容器的結(jié)構(gòu)基本相同，只要把data-role屬性的參數(shù)設(shè)置為”footer例如：復(fù)制代碼代碼如下Footer content與標(biāo)題容器相比頁腳容器有更多的靈活度，它不會想標(biāo)題容器一樣只允許放置兩個按鈕，并且也不會默認(rèn)的把按鈕放置在左右的頂端，頁腳的按鈕默認(rèn)是從左到右依次排列的，并且何以放置更多的按鈕。在頁腳容器上只要添加一個class="ui-bar"就可以將頁腳變成一個工具條，你可以不用設(shè)置任何的布局樣式就可 以在其中添加整齊的按鈕。例如：復(fù)制代碼代碼如下：RemoveAddUpDown如果我們需要一組鏈接效果，我們可以這樣寫:復(fù)制代碼代碼如下：RemoveAdd

8、UpDown技巧：通過使用 data-id屬性可以讓多個頁面使用相同的頁腳。導(dǎo)航導(dǎo)航容器是一個可以每行容納最多5個按鈕的按鈕組控件，用一個擁有 data-role="navbar"屬性的div 來容納這些按鈕。例子：復(fù)制代碼代碼如下：OneTwo在默認(rèn)的按鈕上添加class="ui-btn-active"如果按鈕的數(shù)量超過5個，導(dǎo)航容器將會自動以合適 的數(shù)量分配成多行顯示。按鈕你可以將頁面中 的任何一個鏈接通過 data-role="button"來聲明成為按鈕的顯示風(fēng)格。為了風(fēng)格統(tǒng)一，框架會在頁面加載時自動將form 類的按鈕格式化

9、為jQuery Mobile風(fēng)格的按鈕，不需要添加data-role 屬性。框架中包含了一組常用的圖標(biāo)可以用于按鈕，用 data-icon屬性中的參數(shù)來定義顯示不同的圖標(biāo)效果。例如：復(fù)制代碼代碼如下:Deletedata-icon原生參數(shù)列表除了可以默認(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-ic o pos="notext"屬性可以讓按鈕隱藏文字。內(nèi)聯(lián)樣式在框架中默認(rèn)情況下按鈕是橫向獨占根據(jù)屏幕寬度橫

10、 向自適應(yīng)的，但是我們在應(yīng)用的應(yīng)用中經(jīng)常需要在一行中顯示多個按鈕，這時候我們就需要知道一個新的叫做內(nèi)聯(lián)模式 的屬性了data-inline="true" 。例如：復(fù)制代碼代碼如下：CancelSave按鈕組jQuery Mobile框架可以將幾個按鈕以組的方式顯示，data-role="controlgroup"用以展示按鈕間的緊湊關(guān)系。例如：復(fù)制代碼代碼如下：YesNoMaybe如果需要按鈕橫向排列可以增加data-type="horizontal" 屬性。表單應(yīng)用jQuery Mobile框架為原生的html表單元素封裝了新 的表

11、現(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ù)制代碼代碼如下：AB列表應(yīng)用信息列表是開發(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"就可以讓框架以