頁面跳轉時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"
>
pagecontainerelementhash
.page();
和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 ...