h-tml5各種頁面切換效果和模態對話框用法總結

發布時間:2017-09-11 08:00 來源:互聯網 當前欄目:網頁設計教程

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

頁面動畫

data-transition 屬性可以定義頁面切換是的動畫效果。
例如:<a href="index.html" data-transition="pop">I'll pop</a>
data-transition 參數表:

參數說明

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

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


模態對話框

模態對話框是一種帶有圓角標題欄和關閉按鈕的偽浮動層,用于獨占事件的應用。任何結構化的頁面都可以用 data-rel="dialog"鏈接的方式實現模態對話框應用。
例如:<a href="foo.html" data-rel="dialog">Open dialog</a>
這個頁面切換效果同樣可以使用標準頁面的 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"屬性。

標題容器

標題容器是頁面頁眉區域的顯示控件,主要用來顯示標題和主要操作的區域。
結構代碼:
 

代碼如下:<div data-role="header">
<h1>Page Title</h1>
</div>


為了方便頁面的交互在頁面切換后會在標題容器的左側自動生成一個后退按鈕,這樣可以簡化我們的開發復雜程度,但是有些時候我們會因為應用的需求而不需要這個后退按鈕,可以在標題容器上添加 data-backbtn="false"屬性用來阻止后退按鈕的自動創建。
標題容器的左側和右側分別可以放置一個按鈕,在阻止自動生成的后退按鈕后,我們就可以在后退按鈕的位置來自定義按鈕了。

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、