html5頁面切換效果和模態(tài)對話框的用法有哪些

這篇文章主要介紹“html5頁面切換效果和模態(tài)對話框的用法有哪些”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“html5頁面切換效果和模態(tài)對話框的用法有哪些”文章能幫助大家解決問題。

在太白等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站設(shè)計制作按需網(wǎng)站開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),網(wǎng)絡(luò)營銷推廣,外貿(mào)網(wǎng)站制作,太白網(wǎng)站建設(shè)費用合理。

頁面動畫：

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)

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

模態(tài)對話框

模態(tài)對話框是一種帶有圓角標題欄和關(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>

這個頁面切換效果同樣可以使用標準頁面的 data-transition 參數(shù)效果。建議使用"pop"、"slideup" 和"flip"參數(shù)以達到更好的效果。

這個模態(tài)對話框會默認生成關(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 提供了一個相對完整的解決方案。

工具條分為:標題（header bar）,頁腳（footer bar）和導(dǎo)航（nav bar）這三中應(yīng)用。

其中標題和頁腳在頁面中有一些不同的應(yīng)用方式，默認工具條是以嵌入（inline）的方式定位的，這種定位方式可以實現(xiàn)最大限度的兼容性，包括在對腳本和 css 兼容性不佳的設(shè)備都有很好的優(yōu)化。

另一種是浮動（fixed）定位的方式，也可以成為“靜態(tài)“定位，這種定位方式可以讓工具條始終保持在屏幕的頂部或者底部。并可以接受點擊事件來顯示/隱藏工具條，已達到最大化利用屏幕空間的目的。

實現(xiàn)方式：在標題和頁腳區(qū)域加入 data-position="fixed"屬性。

標題容器

標題容器是頁面頁眉區(qū)域的顯示控件，主要用來顯示標題和主要操作的區(qū)域。

結(jié)構(gòu)代碼：

復(fù)制代碼

代碼如下:

<h2>Page Title</h2>

</div>

為了方便頁面的交互在頁面切換后會在標題容器的左側(cè)自動生成一個后退按鈕，這樣可以簡化我們的開發(fā)復(fù)雜程度，但是有些時候我們會因為應(yīng)用的需求而不需要這個后退按鈕，可以在標題容器上添加 data-backbtn="false"屬性用來阻止后退按鈕的自動創(chuàng)建。

標題容器的左側(cè)和右側(cè)分別可以放置一個按鈕，在阻止自動生成的后退按鈕后，我們就可以在后退按鈕的位置來自定義按鈕了。

例如：

復(fù)制代碼

代碼如下:

<a href="index.html" data-icon="delete">Cancel</a>

<h2>Edit Contact</h2>

</div>

如果需要自定義默認的后退按鈕中的文本，可以用data-back-btn-text="previous"屬性來實現(xiàn)，或者通過擴展的方式實現(xiàn)：

復(fù)制代碼

代碼如下:

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

如果你沒有使用標準的結(jié)構(gòu)來創(chuàng)建標題區(qū)域，那么框架將不會自動生成默認的按鈕。

頁腳容器

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

例如：

復(fù)制代碼

代碼如下:

<h5>Footer content</h5>

</div>

與標題容器相比頁腳容器有更多的靈活度，它不會想標題容器一樣只允許放置兩個按鈕，并且也不會默認的把按鈕放置在左右的頂端，頁腳的按鈕默認是從左到右依次排列的，并且何以放置更多的按鈕。

在頁腳容器上只要添加一個 class="ui-bar"就可以將頁腳變成一個工具條，你可以不用設(shè)置任何的布局樣式就可以在其中添加整齊的按鈕。

例如：

復(fù)制代碼

代碼如下:

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

</div>

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

復(fù)制代碼

代碼如下:

<a href="index.html" data-icon="delete">Remove</a>

</div>

技巧：通過使用 data-id 屬性可以讓多個頁面使用相同的頁腳。

導(dǎo)航

導(dǎo)航容器是一個可以每行容納最多 5 個按鈕的按鈕組控件，用一個擁有 data-role="navbar"

屬性的 div 來容納這些按鈕。

例子：

復(fù)制代碼

代碼如下:

<ul>

</ul>

</div>

</div>

在默認的按鈕上添加 class="ui-btn-active"

如果按鈕的數(shù)量超過 5 個，導(dǎo)航容器將會自動以合適的數(shù)量分配成多行顯示。

按鈕

你可以將頁面中的任何一個鏈接通過 data-role="button"來聲明成為按鈕的顯示風格。為了風格統(tǒng)一，框架會在頁面加載時自動將 form 類的按鈕格式化為 jQuery Mobile 風格的按鈕，不需要添加 data-role 屬性。

框架中包含了一組常用的圖標可以用于按鈕，用 data-icon 屬性中的參數(shù)來定義顯示不同的圖標效果。

例如：

復(fù)制代碼

代碼如下:

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

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

除了可以默認顯示左側(cè)的圖標之外，還可以用 data-iconpos 屬性來定義圖標與文字的位置關(guān)系。

data-iconpos 參數(shù)列表：

參數(shù)效果：

right 圖標在文字的右側(cè)

top 圖標在文字上面

bottom 圖標在文字下面

data-iconpos="notext"屬性可以讓按鈕隱藏文字。

內(nèi)聯(lián)樣式

在框架中默認情況下按鈕是橫向獨占根據(jù)屏幕寬度橫向自適應(yīng)的，但是我們在應(yīng)用的應(yīng)用中經(jīng)常需要在一行中顯示多個按鈕，這時候我們就需要知道一個新的叫做內(nèi)聯(lián)模式的屬性了

data-inline="true"。

例如：

復(fù)制代碼

代碼如下:

<a href="index.html" data-role="button">Cancel</a>

</div>

按鈕組

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

復(fù)制代碼

代碼如下:

<a href="index.html" data-role="button">Maybe</a>

</div>

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

表單應(yīng)用

jQuery Mobile 框架為原生的 html 表單元素封裝了新的表現(xiàn)形式，對觸屏設(shè)備的操作進行了優(yōu)化。在框架的頁面中會自動將 form 元素渲染成 jQuery Mobile 風格的元素。

form 元素的使用和默認的 html 方式使用相同，可以同樣使用 Post 和 get 方式提交數(shù)據(jù)，但是需要注意的是元素的 ID 命名問題，在常規(guī)的規(guī)范中同一個頁面中是不允許出現(xiàn)相同的 ID命名的，在 jQuery Mobile 中由于其允許在同一個 DOM 中存在多個頁面，所以建議 form 元素的 ID 命名在整個項目中是唯一的，防止由于 ID 問題引發(fā)的錯誤。

默認情況下框架會自動渲染在標準頁面中的 form 元素的風格，一旦成功渲染后，這個控件元素將可以使用 jQuery 中的函數(shù)進行操作。在某些情況下，我們需要使用 html 原生的 form 元素，為了阻止 mobile 框架對該元素的自動渲染，在框架中我們在 data-role 屬性中引入了一個控制參數(shù)”none”。使用這個屬性參數(shù)就會讓該元素以 html 原生的狀態(tài)顯示。

例如：

復(fù)制代碼

代碼如下:

</select>

列表應(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"就可以讓框架以列表的方式渲染了，例如：

復(fù)制代碼

代碼如下:

<li><a href="acura.html">Acura</a></li>

</ul>

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

例如：

復(fù)制代碼

代碼如下:

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

以上是運用 jQuery Mobile 進行界面構(gòu)建的基礎(chǔ)規(guī)則。

關(guān)于“html5頁面切換效果和模態(tài)對話框的用法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

網(wǎng)頁標題：html5頁面切換效果和模態(tài)對話框的用法有哪些
標題鏈接：http://muchs.cn/article4/jsojie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、虛擬主機、搜索引擎優(yōu)化、定制開發(fā)、品牌網(wǎng)站設(shè)計、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容