jQueryMobile頁面跳轉應注意的事項

2021-09-01 21:17:34 字數 2420 閱讀 7225

頁面跳轉時pagebeforechange事件會被觸發兩次,通過$(document).bind("pagebeforechange", handlechangepage);來繫結pagebeforechange事件的觸發函式handlechangepage(e,data),第一次 觸發時data.topage是到達頁面的url,型別是string。第二次觸發時data.topage是e.fn.e.init[1](搞不懂具體 是什麼東西)。

第二次觸發時可以獲取到達頁面的資訊,因此可以在第二次觸發時來增加自己的操作,也就是if(typeof data.topage != 「string」).這時可以用e.target.baseuri來獲取到達頁面的uri,型別是string,然後就可以分析出引數等一些東西。

利用e.target.find(「pageid」)來獲取到達頁的相應元素加以控制。

「get」方式提交時可以直接解析e.target.baseuri來獲取引數

「post」方式提交時可以分析data.options.data來獲取引數。也可以在changepage裡利用$(「form」).serializearray()轉換為json物件(這種方式比較好)或者$(「form」).serialize()轉換成字串。

如果發生中文亂碼問題,可以嘗試使用decodeuricomponent(str)進行解碼。

**例項:

index.html  

.header.

a.html

cccccc

open dialog

footer

a.html

.header.

b.html

back

footer

如果採用ajax的方式鏈結到乙個有多page的文件doc1,那麼只會載入第乙個page,這時就無法在這個page上鏈結到文件doc1上的其他page了。利用subpage

外掛程式可以實現多

page

文件的載入。

使用ajax方式來跳轉到下乙個文件時,由於jquerymobile框架的限制不會載入

外面的js和css資源,所以把應當把js和css**放到

裡面。$( document).delegate("#aboutpage", "pageinit", function() );使用單一頁面模式時,通過以上兩種方式jquerymobile會在主介面載入後在後台載入預載入的檔案,同時會觸發pagecreate事件。

這樣能夠流暢地轉移到預載入的頁面而不會顯示載入的資訊

快取頁面

保留所有訪問過的頁面

$.mobile.page.prototype.options.domcache = true;
快取特定的頁面

data-dom-cache="true"

>

pagecontainerelement

.page();

hash

和ajax

頁面驅動模型:

通過ajax形式來跳轉頁面時,會觸發hashchange 事件,jquerymobile在處理這個事件時會修改location.href的值。

jquerymobile是通過給頁面新增 "ui-page-active" 樣式來設定顯示的頁面的。

pushstate 

外掛程式:

jquerymobile利用 history.replacestate函式將基於hash的長的url轉換為更加簡潔的完整的文件位址。如果瀏 覽器不支援 history.replacestate,或者禁用了這一特性,位址列就會顯示基於hash的url(就是帶#的url)。

jquerymobile這時會觸發hashchange事件,可以通過$(window).bind("hashchange",function(e){});來進行捕獲

可以在文件完全載入前通過設定$.mobile.pushstateenabled=false來禁用這一特性。

如果不支援ajax的導航模式,或者設定了 rel="external" 或$.mobile.ajaxenabled=false,則建議禁用這一特性以獲得更加連貫的行為。

小知識:

一、jquery頁面載入函式寫法:

1)$(document).ready(function())(window)

前乙個括號是宣告乙個函式,後面的括號是呼叫這個函式並傳參。

函式帶undefined引數的目的是防止在外部宣告了undefined

變數導致錯誤的引用。

history.pushstate():改變當前頁面的url,將url放入瀏覽器歷史裡

history.replacestat():將指定的url替換當前的url

如何呼叫

var state = , false);

這樣就可以結合ajax和pushstate完美的進行無重新整理瀏覽了。

jQuery Mobile 頁面事件

在 jquery mobile 中與頁面打交道的事件被分為四類 當 jquery mobile 中的一張典型頁面進行初始化時,它會經歷三個階段 每個階段觸發的事件都可用於插入或操作 事件描述 pagebeforecreate 當頁面即將初始化,並且在 jquery mobile 已開始增強頁面之前,...

jquerymobile頁面結構

1 必須用html5的文件型別頭 2 包含viewport的meta標籤 3 包含jquerymobile的css和js檔案 4 使用data role page 結構 data role page data role header data role content data role foote...

jquery mobile頁面新增iscroll

在低版本的iso裝置上瀏覽器不支援position fixed樣式,找了很多解決方案之後選擇了iscroll。增加滾動功能的 如下 1 function 89 elm.css 1213 var barheight 0 頁頭頁尾高度 1415 設定頁頭樣式 16var header elm.find ...