如何實(shí)現(xiàn)html5各種頁(yè)面切換效果和模態(tài)對(duì)話框

本篇內(nèi)容介紹了“如何實(shí)現(xiàn)html5各種頁(yè)面切換效果和模態(tài)對(duì)話框”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

具體分析如下：

頁(yè)面動(dòng)畫(huà)：

data-transition 屬性可以定義頁(yè)面切換是的動(dòng)畫(huà)效果。
例如：<a href="index.html" data-transition="pop">I'll pop</a>
data-transition 參數(shù)表：

參數(shù)說(shuō)明

slide 從右側(cè)向左滑入頁(yè)面
slideup 從底部向上滑入
slidedown 從上向下滑入
pop 從中心漸顯展開(kāi)
fade 漸顯
flip 翻轉(zhuǎn)

備注：如果想要在目標(biāo)頁(yè)面中顯示后退按鈕，可以在鏈接中加入 data-direction="reverse"屬性，這個(gè)屬性和原來(lái)的 data-back="true"相同，不知道在正式版本中將會(huì)保留哪個(gè)屬性。

模態(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)用。
例如：<a href="foo.html" data-rel="dialog">Open dialog</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)關(guān)閉。還可以使用內(nèi)置的”close”方法來(lái)關(guān)閉模態(tài)對(duì)話框，例如：$('.ui-dialog').dialog('close')。
由于模態(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ū)⒒氐?A 頁(yè)面，而不是 B 頁(yè)面。

工具條

工具條主要用于”header”,”footer”等區(qū)域，用來(lái)支撐和實(shí)現(xiàn)頁(yè)面中業(yè)務(wù)功能的應(yīng)用。jQuery Mobile 提供了一個(gè)相對(duì)完整的解決方案。
工具條分為:標(biāo)題（header bar）,頁(yè)腳（footer bar）和導(dǎo)航（nav bar）這三中應(yīng)用。
其中標(biāo)題和頁(yè)腳在頁(yè)面中有一些不同的應(yīng)用方式，默認(rèn)工具條是以嵌入（inline）的方式定位的，這種定位方式可以實(shí)現(xiàn)最大限度的兼容性，包括在對(duì)腳本和 css 兼容性不佳的設(shè)備都有很好的優(yōu)化。
另一種是浮動(dòng)（fixed）定位的方式，也可以成為“靜態(tài)“定位，這種定位方式可以讓工具條始終保持在屏幕的頂部或者底部。并可以接受點(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ū)域。
結(jié)構(gòu)代碼：

代碼如下:

<div data-role="header">
<h2>Page Title</h2>
</div>

為了方便頁(yè)面的交互在頁(yè)面切換后會(huì)在標(biāo)題容器的左側(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)自定義按鈕了。
例如：

代碼如下:

<div data-role="header" data-position="inline" data-backbtn="false" >
<a href="index.html" data-icon="delete">Cancel</a>
<h2>Edit Contact</h2>
<a href="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)：

代碼如下:

$.mobile.page.prototype.options.backBtnText = "previous"

如果你沒(méi)有使用標(biāo)準(zhǔn)的結(jié)構(gòu)來(lái)創(chuàng)建標(biāo)題區(qū)域，那么框架將不會(huì)自動(dòng)生成默認(rèn)的按鈕。

頁(yè)腳容器

頁(yè)腳容器的結(jié)構(gòu)和標(biāo)題容器的結(jié)構(gòu)基本相同，只要把 data-role 屬性的參數(shù)設(shè)置為”footer”。
例如：

代碼如下:

<div data-role="footer">
<h5>Footer content</h5>
</div>

與標(biāo)題容器相比頁(yè)腳容器有更多的靈活度，它不會(huì)想標(biāo)題容器一樣只允許放置兩個(gè)按鈕，并且也不會(huì)默認(rèn)的把按鈕放置在左右的頂端，頁(yè)腳的按鈕默認(rèn)是從左到右依次排列的，并且何以放置更多的按鈕。
在頁(yè)腳容器上只要添加一個(gè) class="ui-bar"就可以將頁(yè)腳變成一個(gè)工具條，你可以不用設(shè)置任何的布局樣式就可以在其中添加整齊的按鈕。
例如：

代碼如下:

<div data-role="footer" class="ui-bar">
<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>

如果我們需要一組鏈接效果，我們可以這樣寫(xiě)：

代碼如下:

<div data-role="footer" class="ui-bar" data-position="inline">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-icon="delete">Remove</a>
<a href="index.html" data-icon="plus">Add</a>
<a href="index.html" data-icon="arrow-u">Up</a>
<a href="index.html" data-icon="arrow-d">Down</a>
</div>
</div>

技巧：通過(guò)使用 data-id 屬性可以讓多個(gè)頁(yè)面使用相同的頁(yè)腳。

導(dǎo)航

導(dǎo)航容器是一個(gè)可以每行容納最多 5 個(gè)按鈕的按鈕組控件，用一個(gè)擁有 data-role="navbar"
屬性的 div 來(lái)容納這些按鈕。
例子：

代碼如下:

<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->

在默認(rèn)的按鈕上添加 class="ui-btn-active"
如果按鈕的數(shù)量超過(guò) 5 個(gè)，導(dǎo)航容器將會(huì)自動(dòng)以合適的數(shù)量分配成多行顯示。

按鈕

你可以將頁(yè)面中的任何一個(gè)鏈接通過(guò) data-role="button"來(lái)聲明成為按鈕的顯示風(fēng)格。為了風(fēng)格統(tǒng)一，框架會(huì)在頁(yè)面加載時(shí)自動(dòng)將 form 類的按鈕格式化為 jQuery Mobile 風(fēng)格的按鈕，不需要添加 data-role 屬性。
框架中包含了一組常用的圖標(biāo)可以用于按鈕，用 data-icon 屬性中的參數(shù)來(lái)定義顯示不同的圖標(biāo)效果。
例如：

代碼如下:

<a href="index.html" data-role="button" data-icon="delete">Delete</a>

data-icon 原生參數(shù)列表

除了可以默認(rèn)顯示左側(cè)的圖標(biāo)之外，還可以用 data-iconpos 屬性來(lái)定義圖標(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)情況下按鈕是橫向獨(dú)占根據(jù)屏幕寬度橫向自適應(yīng)的，但是我們?cè)趹?yīng)用的應(yīng)用中經(jīng)常需要在一行中顯示多個(gè)按鈕，這時(shí)候我們就需要知道一個(gè)新的叫做內(nèi)聯(lián)模式的屬性了
data-inline="true"。
例如：

代碼如下:

<div data-inline="true">
<a href="index.html" data-role="button">Cancel</a>
<a href="index.html" data-role="button" data-theme="b">Save</a>
</div>

 
按鈕組

jQuery Mobile 框架可以將幾個(gè)按鈕以組的方式顯示，data-role="controlgroup"用以展示按鈕間的緊湊關(guān)系。例如：

代碼如下:

<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>

如果需要按鈕橫向排列可以增加 data-type="horizontal"屬性。

表單應(yīng)用

jQuery Mobile 框架為原生的 html 表單元素封裝了新的表現(xiàn)形式，對(duì)觸屏設(shè)備的操作進(jìn)行了優(yōu)化。在框架的頁(yè)面中會(huì)自動(dòng)將 form 元素渲染成 jQuery Mobile 風(fēng)格的元素。
form 元素的使用和默認(rèn)的 html 方式使用相同，可以同樣使用 Post 和 get 方式提交數(shù)據(jù)，但是需要注意的是元素的 ID 命名問(wèn)題，在常規(guī)的規(guī)范中同一個(gè)頁(yè)面中是不允許出現(xiàn)相同的 ID命名的，在 jQuery Mobile 中由于其允許在同一個(gè) DOM 中存在多個(gè)頁(yè)面，所以建議 form 元素的 ID 命名在整個(gè)項(xiàng)目中是唯一的，防止由于 ID 問(wèn)題引發(fā)的錯(cuò)誤。
默認(rèn)情況下框架會(huì)自動(dòng)渲染在標(biāo)準(zhǔn)頁(yè)面中的 form 元素的風(fēng)格，一旦成功渲染后，這個(gè)控件元素將可以使用 jQuery 中的函數(shù)進(jìn)行操作。在某些情況下，我們需要使用 html 原生的 form 元素，為了阻止 mobile 框架對(duì)該元素的自動(dòng)渲染，在框架中我們?cè)?data-role 屬性中引入了一個(gè)控制參數(shù)”none”。使用這個(gè)屬性參數(shù)就會(huì)讓該元素以 html 原生的狀態(tài)顯示。
例如：

代碼如下:

<select name="foo" id="foo" data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>

 
列表應(yīng)用

信息列表是開(kāi)發(fā)應(yīng)用中使用頻率相對(duì)比較高的控件，用于數(shù)據(jù)顯示、導(dǎo)航, 數(shù)據(jù)列表等。為了適應(yīng)不同的信息內(nèi)容，列表的表現(xiàn)形式也多種多樣。
列表的代碼結(jié)構(gòu)是以有序和無(wú)序列表來(lái)實(shí)現(xiàn)的，只要在 ul 或 ol 上聲明 data-role="listview"就可以讓框架以列表的方式渲染了，例如：

代碼如下:

<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>

如果需要在列表里添加數(shù)據(jù)，則需要在數(shù)據(jù)加載后執(zhí)行 refresh()方法對(duì)列表進(jìn)行數(shù)據(jù)更新。
例如：

代碼如下:

$('ul').listview('refresh');

“如何實(shí)現(xiàn)html5各種頁(yè)面切換效果和模態(tài)對(duì)話框”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！