頁面跳轉(zhuǎn)：頁面跳轉(zhuǎn)時pagebeforechange事件會被觸發(fā)兩次,，通過$(document).bind("pagebeforechange", handleChangePage);來綁定pagebeforechange事件的觸發(fā)函數(shù)handleChangePage(e,data),第一次觸發(fā)時data.toPage是到達(dá)頁面的url,，類型是string,。第二次觸發(fā)時data.toPage是e.fn.e.init[1](搞不懂具體是什么東西),。 第二次觸發(fā)時可以獲取到達(dá)頁面的信息,，因此可以在第二次觸發(fā)時來增加自己的操作,，也就是if(typeof data.toPage != “string”).這時可以用e.target.baseURI來獲取到達(dá)頁面的uri，類型是string,，然后就可以分析出參數(shù)等一些東西,。 利用e.target.find(“pageId”)來獲取到達(dá)頁的相應(yīng)元素加以控制。
“get”方式提交時可以直接解析e.target.baseURI來獲取參數(shù) “post”方式提交時可以分析data.options.data來獲取參數(shù),。也可以在changePage里利用$(“form”).serializeArray()轉(zhuǎn)換為JSON對象（這種方式比較好）或者$(“form”).serialize()轉(zhuǎn)換成字符串,。 如果發(fā)生中文亂碼問題，可以嘗試使用decodeURIComponent(str)進(jìn)行解碼,。
代碼實例： index.html <!DOCTYPE html> a.html <!DOCTYPE html> Jquerymobile加載頁面相關(guān)知識：如果采用ajax的方式鏈接到一個有多page的文檔doc1,，那么只會加載第一個page，這時就無法在這個page上鏈接到文檔doc1上的其他page了,。利用subpage插件可以實現(xiàn)多page文檔的加載,。 使用ajax方式來跳轉(zhuǎn)到下一個文檔時,，由于jquerymobile框架的限制不會加載<div data-role=”page”></div>外面的js和css資源，所以把應(yīng)當(dāng)把js和css代碼放到<divdata-role=”page”></div>里面,。 Jquerymobile中推薦在捕獲pageinit事件的函數(shù)中來操作page里的元素,。例： $( document).delegate("#aboutPage", "pageinit", function() { alert('Apage with an ID of "aboutPage" was just created by jQuery Mobile!'); });
預(yù)加載頁面 1、<ahref="prefetchThisPage.html"data-prefetch> ... </a>
使用單一頁面模式時,，通過以上兩種方式Jquerymobile會在主界面加載后在后臺加載預(yù)加載的文件，同時會觸發(fā)pagecreate事件,。 這樣能夠流暢地轉(zhuǎn)移到預(yù)加載的頁面而不會顯示加載的信息
緩存頁面 保留所有訪問過的頁面 緩存特定的頁面 pageContainerElement
Hash和Ajax頁面驅(qū)動模型： 通過Ajax形式來跳轉(zhuǎn)頁面時,，會觸發(fā)hashchange 事件，jquerymobile在處理這個事件時會修改location.href的值,。 Jquerymobile是通過給頁面添加 "ui-page-active" 樣式來設(shè)置顯示的頁面的,。
pushState 插件： jquerymobile利用 history.replaceState函數(shù)將基于hash的長的url轉(zhuǎn)換為更加簡潔的完整的文檔地址。如果瀏覽器不支持 history.replaceState,，或者禁用了這一特性,，地址欄就會顯示基于hash的url（就是帶#的url）。 Jquerymobile這時會觸發(fā)hashchange事件,，可以通過$(window).bind("hashchange",function（e）{});來進(jìn)行捕獲 可以在文檔完全加載前通過設(shè)置$.mobile.pushStateEnabled=false來禁用這一特性,。 如果不支持ajax的導(dǎo)航模式，或者設(shè)置了 rel="external" 或$.mobile.ajaxEnabled=false,，則建議禁用這一特性以獲得更加連貫的行為,。
小知識： 一、Jquery頁面加載函數(shù)寫法： 1） $(document).ready(function(){ ... })
2)
$(function(){ ... }) 二,、jquerymobile中這種寫法 (function(window, undefined ) { ...// code goes here })(window) 前一個括號是聲明一個函數(shù),，后面的括號是調(diào)用這個函數(shù)并傳參。 函數(shù)帶undefined參數(shù)的目的是防止在外部聲明了undefined變量導(dǎo)致錯誤的引用,。 三,、使用ajax和window.history.pushState無刷新改變頁面內(nèi)容和地址欄URLhistory.pushState():改變當(dāng)前頁面的URL，將URL放入瀏覽器歷史里 history.replaceStat():將指定的URL替換當(dāng)前的URL 如何調(diào)用 var state = { title: title, url: options.url, otherkey: othervalue }; window.history.pushState(state,document.title, url); 如何響應(yīng)瀏覽器的前進(jìn),、后退操作 window對象上提供了onpopstate事件,，上面?zhèn)鬟f的state對象會成為event的子對象，這樣就可以拿到存儲的title和URL了,。 window.addEventListener('popstate',function(e){ if (history.state){ var state = e.state; //do something(state.url, state.title); } }, false); 這樣就可以結(jié)合ajax和pushState完美的進(jìn)行無刷新瀏覽了。 |
|
|
