jQuery Mobile(5)-彈出視窗與頁面轉換

彈出視窗可以分成 Dialog 和 Popup 兩種,前者是載入另一個網頁,後者則是開啟目前網頁的元件。兩者的應用範圍差不多,可以做訊息提示(Alert/Toast)、確認視窗、目錄及表格…等等。如果需要撰寫複雜的內容及 JavaScript 程式碼,建議使用 Dialog,反之一般簡單的提示視窗,則可以使用 Popup 來完成。

資料來源:跨裝置網頁設計jQuery Mobile Demos

Dialog 視窗

的連結中,只要加入 data-rel=“dialog” 屬性即可以採 Dialog 的方式載入 href 指定的網頁。不過要注意的是,載入的網頁必須是 jQuery Mobile 的網頁,否則載入就會失敗。另外如果網頁中有多個 page 時,只會載入第一個 page。開啟的網頁若是有 data-role=“header” 元素,則視窗左上角會自動出現 ╳ 關閉視窗。如果想要自己設置取消視窗的按鈕,可以在加入 data-role=“button” 屬性(返回上一頁),或是使用 JavaScript 呼叫,例如 $(“#myDialog”).dialog(“close”)。如果你的 Dialog 又呼叫了其他 Dialog 也沒關係,統一使用返回的指令就可以退回到前一個對話框,直到回到原始頁面為止。下面的程式碼分別是原始網頁的按鈕,以及開啟對話框的內容:

打開 dialog

Dialog

使用Dialog的方式開啟另一個網頁,只要在連結加入 data-rel="dialog" 即可。

確認

Popup 視窗

Popup 的按鈕類似 Dialog,只要在加入 data-rel=“popup”,就可以開啟 href 中對應的 Popup 物件。開啟的物件必須加入 data-role=“popup” 屬性,表示它是一個 popup 物件,網頁載入時不會顯示出來。裡面的內容可以任意搭配,包括後面文章會提到的清單檢示(listview)和摺疊面版(collapsible),或是表單(form)都可以(更多範例請參考官方網站)。在 Popup 物件中加入 class=“ui-content” 屬性,會使內容四周加入 15px 的 padding (相當於加入 style=“padding:15px” 語法)。Popup 預設開啟的位置是在按鈕上,若是使用 JavaScript 開啟則會在視窗中間。JavaScript 開啟和關閉的範例分別是 $(“#myPopup”).popup(“open”) 和 $(“#myPopup”).popup(“close”)。若是想要變更視窗開啟的位置,可以在按鈕上加入 data-position-to 來指定位置。Popup 除了可以利用 data-theme 設定樣式外,還可以加入 data-overlay-theme 屬性設定視窗外底色樣式(參考顏色與樣式設計)。

打開 Popup 的按鈕



關閉

基礎的popup

  <p>
    <img src="https://lh3.googleusercontent.com/-ybZPJErYtws/U8jOP5MbYzI/AAAAAAAADzU/z7c6qe9fxnw/w373-h121-no/jQueryMobile05-2.png" />
  </p>


  <p>
    <strong>頁面轉換</strong><br />
    轉換頁面的特效,只要在連結按鈕加上 data-transition 屬性即可。可以應用的範圍包括開啟 page、dialog 和 popup。它的屬性值包括:none(無)、fade(淡入)、flip(翻轉)、flow(流動)、pop(彈出)、slide(由右向左滑入)、slidedown(由上往下滑入)、slidefade(由右向左淡入)、slideup(由下往上滑入)、turn(轉動)。範例結果請參考<a href="http://demos.jquerymobile.com/1.2.0/docs/pages/page-transitions.html" title="Page transitions" target="_blank">官方網頁</a>。jQuery Mobile 預設的換頁特效是 fade,若是想修改預設值,請使用下面程式碼:
  </p>


  <pre lang="javascript">

$(document).bind(“mobileinit”, function(){ $.mobile.defaultPageTransition = “none”; });