JQMobile中的頁面與對話框

1.關於page容器

在page容器內,可以使用任何有效的html標籤,但是page容器的直接子節點需要使用data-role標記屬爲“header”“content”“footer”的三個容器。

2.關於頁面之間的跳轉

1).如果是外部頁面的鏈接,那麼JQmobile會自動構建AJAX驅動的站點和應用。默認情況下,當你點擊了一個指向外部頁面(比如:products.html)的鏈接,JQmoblie的分析鏈接地址,然後產生一個ajax請求(Hajax),顯示一個讀取中的提示框。
如果AJAX請求成功,新頁面的內容會添加到DOM中,所有MOBILE組件都會自動初始化,所以新的頁面會通過頁面轉場動畫看到。
如果AJAX請求失敗,JQmoblie會顯示一個小錯誤提示框(默認的主題爲E),然後過一會就消失了,不會影響你繼續瀏覽。
2).如果是本地(內部)的鏈接,因爲每個page頁面都有一個獨特的ID,所以可以通過將內部鏈接地址定義爲herf="#xxx"實現互相跳轉。
3).若當前頁面有鏈接到一個包含幾個page的頁面,那麼這個鏈接需要添加rel="external"和data-ajax="false"的屬性。這樣告知JQmobile完全地加載一個頁面,清理掉AJAX在URL的哈希值。
4).需要注意的是:對於所有AJAX的"page"使用的是哈希值來跟蹤導航歷史,所以現在還不可以通過外部頁面的一個ID指向哪一個錨點,因爲JqueryMobile會尋找帶有該ID的"page",而不是滾屏到帶有該ID的內容上。(暫不理解)
5).如果給某個鏈接添加了data-rel="back"的屬性時,那麼點擊該鏈接時,都會無視鏈接的herf,後退到瀏覽器歷史的上一個地址。如果只想看到一個翻轉的頁面轉場而不是真正回到上一個歷史記錄的地址,要使用data-direction=“reverse”屬性,而不是後退鏈接。(DW不支持data-dirction屬性)
6).可以給鏈接添加data-transition屬性來設定自定義的頁面轉場效果,屬性值有pop(彈出)、slide(從右向左側滑)、slideup(向上滑)、slidedown(向下滑)、flip(翻轉)、fade(沒什麼效果)六種。

3.對話框的學習

1).當給鏈接添加屬性data-rel=“dialog”時,該鏈接指向的頁面會表現出對話框,JQmobile會自動給這個對話框添加效果,使對話框浮在頁面上。
2).對話框也有轉場,推薦使用pop、slide、flip屬性來實現轉場。
3).因爲對話框是典型地用來給頁面起支持作用的,所以JqueryMobile不會在歷史記錄的哈希值裏包含對話框。這就意味着當點擊對話框後退按鈕時,他不會出現在你的瀏覽器歷史記錄裏。比如說,如果你在一個頁面上,點擊了一個按鈕打開了一個對話框,然後關閉了這個對話框,到了另一個頁面。這時如果你點擊瀏覽器的後退按鈕,那你會回到第一個頁面,而不是對話框。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章