html5各種頁面切換效果與模態對話框用法總結_html5教學技巧

本文詳細總結了html5各種頁面切換效果和模態對話框用法。分享給大家供大家參考。具體分析如下：

頁面動畫：

data-transition 屬性可以定義頁面切換是的動畫效果。
例如：I'll pop
data-transition 參數表：

參數說明

slide 從右側向左滑入頁面
slideup 從底部向上滑入
slidedown 從上方向下滑入
pop 從中心漸顯展開
fade 漸顯
flip 翻轉

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

模態對話框

模態對話框是一種帶有圓角標題列和關閉按鈕的偽浮動層，用於獨佔事件的應用。任何結構化的頁面都可以用 data-rel="dialog"連結的方式實現模態對話框應用。
例如：Open dialog
這個頁面切換效果同樣可以使用標準頁面的 data-transition 參數效果。建議使用"pop"、"slideup" 和"flip"參數以達到更好的效果。
這個模態對話框會預設產生關閉按鈕，用來回到父級頁面。在腳本能力較弱的裝置上也可以新增一個帶有 data-rel="back"的連結來實現關閉按鈕。
針對支援腳本的裝置可以直接使用 href=”#」或 data-rel="back"來實現關閉。也可以使用內建的”close”方法來關閉模態對話框，例如：$('.ui-dialog').dialog('close')。
由於模態對話框是動態顯示的臨時頁面，所以這個頁面不會被保存在哈希表內，這意味著我們講無法後退到這個頁面，例如你在A 頁面中點擊一個連結打開B 對話框,操作完成並關閉對話框,然後跳到C 頁面,這時候你點擊瀏覽器的後退按鈕，這時候將回到A 頁面，而不是B 頁面。

工具條

工具條主要用於”header”,”footer”等區域，用來支撐和實現頁面中業務功能的應用。 jQuery Mobile 提供了一個相對完整的解決方案。
工具條分為:標題（header bar）,頁腳（footer bar）和導航（nav bar）這三中應用。
其中標題和頁腳在頁面中有一些不同的應用方式，預設工具條是以嵌入（inline）的方式定位的，這種定位方式可以實現最大限度的兼容性，包括在對腳本和css相容性不佳的設備都有很好的最佳化。
另一種是浮動（fixed）定位的方式，也可以成為「靜態「定位，這種定位方式可以讓工具條始終保持在螢幕的頂部或底部。並且可以接受點擊事件來顯示/隱藏工具條，已達到最大化利用螢幕空間的目的。
實作方式：在標題和頁尾區域加入 data-position="fixed"屬性。

標題容器

標題容器是頁面頁眉區域的顯示控件，主要用來顯示標題和主要操作的區域。
結構程式碼：

複製程式碼

程式碼如下:

程式碼如下:

Page Title

為了方便頁面的互動在頁面切換後會在標題容器的左側自動產生一個後退按鈕，這樣可以簡化我們的開發複雜程度，但是有些時候我們會因為應用的需求而不需要這個後退按鈕，可以在標題容器上添加data-backbtn="false"屬性用來阻止後退按鈕的自動創建。

標題容器的左側和右側分別可以放置一個按鈕，在阻止自動產生的後退按鈕後，我們就可以在後退按鈕的位置來自訂按鈕了。

例如：

複製程式碼

程式碼如下:

Cancel

Edit Contact

Save

如果需要自訂預設的後退按鈕中的文本，可以用data-back-btn-text="previous"屬性來實現，或者透過擴展的方式實現：

複製程式碼

程式碼如下:

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

如果你沒有使用標準的結構來建立標題區域，那麼框架將不會自動產生預設的按鈕。

頁腳容器

頁腳容器的結構和標題容器的結構基本上相同，只要把 data-role 屬性的參數設為」footer」。
例如：

複製程式碼

程式碼如下:

Footer content

與標題容器相比頁腳容器有更多的彈性，它不會想標題容器一樣只允許放置兩個按鈕，也不會預設的把按鈕放置在左右的頂端，頁腳的按鈕預設是從左到右依序排列的，並且何以放置更多的按鈕。
在頁腳容器上只要增加一個 class="ui-bar"就可以將頁腳變成一個工具條，你可以不用設定任何的佈局樣式就可以在其中添加整齊的按鈕。
例如：

複製程式碼

程式碼如下:

Remove
Add
Up
Down

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

複製程式碼

程式碼如下:

Remove
Add
Up
Down

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

導航

導航容器是一個可以每行容納最多 5 個按鈕的按鈕組控件，用一個擁有 data-role="navbar"
屬性的 div 來容納這些按鈕。
範例：

複製程式碼

程式碼如下:

• One a>


• Two

在預設的按鈕上新增class="ui-btn-active"
如果按鈕的數量超過5個，導航容器將會自動以適當的數量分配成多行顯示。

按鈕

你可以將頁面中的任何一個連結透過 data-role="button"來宣告成為按鈕的顯示風格。為了風格統一，框架會在頁面載入時自動將 form 類別的按鈕格式化為 jQuery Mobile 風格的按鈕，不需要新增 data-role 屬性。
框架中包含了一組常用的圖示可以用於按鈕，以 data-icon 屬性中的參數定義顯示不同的圖示效果。
例如：

複製程式碼

程式碼如下:

Delete

data-icon 原生參數清單

除了可以預設顯示左邊的圖示之外，還可以用 data-iconpos 屬性來定義圖示與文字的位置關係。
data-iconpos 參數列表：

參數效果：
right 圖示在文字的右側
top 圖示在文字上方
bottom 圖示在文字下方
data-iconpos="notext"屬性可以讓按鈕隱藏文字。

內聯樣式

在框架中預設按鈕是橫向獨佔根據螢幕寬度橫向自適應的，但是我們在應用程式的應用程式中經常需要在一行中顯示多個按鈕，這時候我們就需要知道一個新的叫做內聯模式的屬性了
data-inline="true"。
例如：

複製程式碼

程式碼如下:

Cancel
Save

 
按鈕組

jQuery Mobile 框架可以將幾個按鈕以群組的方式顯示，data-role="controlgroup"用來展示按鈕間的緊湊關係。例如：

複製程式碼

程式碼如下:

Yes
No
Maybe

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

表單應用

jQuery Mobile 框架為原生的 html 表單元素封裝了新的表現形式，對觸控螢幕裝置的操作進行了最佳化。在框架的頁面中會自動將 form 元素渲染成 jQuery Mobile 風格的元素。
form 元素的使用和預設的html 方式使用相同，可以同樣使用Post 和get 方式提交數據，但是需要注意的是元素的ID 命名問題，在常規的規範中同一個頁面中是不允許出現相同的ID命名的，在jQuery Mobile 中由於其允許在同一個DOM 中存在多個頁面，所以建議form 元素的ID 命名在整個專案中是唯一的，防止由於ID 問題引發的錯誤。
預設情況下框架會自動渲染在標準頁面中的 form 元素的風格，一旦成功渲染後，這個控制項元素將可以使用 jQuery 中的函數進行操作。在某些情況下，我們需要使用 html 原生的 form 元素，為了阻止 mobile 框架對該元素的自動渲染，在框架中我們在 data-role 屬性中引入了一個控制參數」none」。使用這個屬性參數就會讓該元素以 html 原生的狀態顯示。
例如：

複製程式碼

程式碼如下:

A
B
C

 
列表應用程式

資訊清單是開發應用程式中使用頻率相對比較高的控件，用於資料顯示、導航, 資料清單等。為了適應不同的訊息內容，清單的表現也多種多樣。
列表的程式碼結構是以有序和無序列表來實現的，只要在ul 或ol 上聲明data-role="listview"就可以讓框架以列表的方式渲染了，例如：

複製程式碼

程式碼如下:

• Acura


• Audi


• BMW

如果需要在清單中添加數據，則需要在資料載入後執行refresh()方法對清單進行資料更新。
例如：

複製程式碼

程式碼如下:

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

以上是運用 jQuery Mobile 進行介面建置的基礎規則。

希望本文所述對大家的HTML5程式設計有所幫助。