1、動態加載頁面問題php
1.存在這樣一個頁面佈局：html
main.html 爲主界面A,B爲該頁面中的三個page，其中A爲splitview左部分頁面，B爲右半部頁面jquery
a1.html 爲一個獨立的頁面ajax
a2.html爲一個獨立的頁面服務器
2.在main.html中有這樣一段scriptapp
$("#A1").live("pagecreate",function(){less
$.getScript("a1.js", function(){dom
$.mobile.changePage(a1.html',{transition: "none",changeHash:false});異步
}); ide
});
而a1.html中存在一個按鈕btn1,a1.js中有這樣一段代碼
$("#btn1").live("click",function(){
$.getScript("a2.js", function(){
$.mobile.changePage(a2.html',{transition: "none",changeHash:false});
});
});
不管a1.js仍是a2.js中的按鈕觸發一個動做，而後動態生成一個頁面填充至B,然後使用
$.mobile.changePage("#B");
這種操做是不能成功的。
每當a1->a2時，a2頁面中的pageceate及pageinit事件會被調用
同理，每當a2->a1時，a1頁面中的pageceate及pageinit事件會被調用
爲了解決這個問題，
方法1.能夠刪除a1,a2頁面，把這兩個頁面的html代碼合併至main.html中。
方法2.若是這樣會致使頁面龐大很差維護，也能夠採用在頁面一加載之初，a1.html的內容使用ajax獲取，而且追加至A容器中，當btn1按鈕點擊時，一樣，使用ajax把a2.html的內容追加至A容器。
2、動態生成ListView問題
這個問題花了整整一天的時間才解決了。以前總是出現各類奇怪的錯誤，典型如：
Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'
個人listview的容器ul徹底是動態生成的。動態HTML代碼以下：
<div data-role="page" id="pLogin" data-hash="false">
<div data-role="header" data-theme="b" data-position="inline">
<h1>歡迎使用</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-inset="true" id="lv1">
<li><a href="#">AAAAAAAAAAA<a></li>
<li><a href="#">BBBBBBBBBBB<a></li>
<li><a href="#">CCCCCCCCCCC<a></li>
<li><a href="#">DDDDDDDDDDD<a></li>
</ul>
</div>
</div>
</div>
調用
$("#lv").listview('refresh');時，出錯了：Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'
查了N多資料，終於弄明白了。由於個人page容器也是動態生成的。page數據加載至容器時，jquerymobile並無對該page容器進行初始化。所以調用 page的content下的listview組件的refresh方法時，會出現異常。
解決方法：
在dom數據加載完成後，從新生成page
$("#pLogin").page();
$("#lv").listview('refresh');
問題成功解決。
3、splitview導航時，導航標籤所在頁面消失。
存在場景，L爲splitview的左部分，R爲splitview的右部分。
在L容器中，存在
<li><a id="a1" href="#d1">導航1</a></li>
<li><a id="a2" onclick="fun1()"href="#d2">導航2</a></li>
在點擊a1,a2按鈕後，觸發fun1，使用ajx去服務器取數據，而且生成一段HTML格式化代碼，填充至R容器中。
服務器生成HTML代碼以下：
<div data-role="page" id="d1" data-hash="false">
<div data-role="header" data-theme="b" data-position="inline">HHHHHH</div>
<div data-role="content">
<div class="content-primary">
XXXXXXXXXXX
</div>
</div>
</div>
fun1代碼：
html = ${發送ajax後，由服務器生成的格式如上}
$("#R").append(html);
$.mobile.changePage("d1");
問題就出現了，是的，R部分顯示了XXXXXXXXXXX，是該顯示的東東，不過，L部分變成空白了。
琢磨了好久，原來是這樣，由於使用ajax，是異步請求，a1點擊時錨點對應的d1 頁面並無生成，而且填充至R容器，因爲找不到d1，所以左部分空白了。
解決方法仍然有兩個：
1.在R部分再作一個空白的page,a1,a2的href屬性設置爲該空白page的id便可
2.在發送異步請求以前，先生成page所在div容器，至少讓d1容器先生成出來，不至於a1找不到錨點。在請求完成後，把請求獲得的數據填充至content部分便可。
4、header上增長返回按鈕時，致使header變高
個人header部分是動態生成的。根據業務須要，有的page須要返回按鈕，有的page不須要。業務詳情共用一個page,每次點擊後，根據業務信息更新header及業務狀況，決定是否顯示返回按鈕。
個人方法：
在header中加入一個按鈕header.append('<a onclick="history.go(-1)">返回<a>');
而後再去修改header部分的文字信息。
不過，問題就來了，第一，返回按鈕的地方不必定準確。第二，header部分變得特別高。把content部分都遮擋了。
解決方案：刪除生成了返回按鈕，使用page帶的返回按鈕屬性。
<div data-role="page" id="p'+id+'" data-add-back-btn="true" data-back-btn-text="返回">
業務邏輯中，使用這樣的代碼
if(back){
$("a[data-rel='back']",header).show();
}else{
$("a[data-rel='back']",header).hide();
}
來決定是否顯示返回按鈕。
這樣作解決了header超高問題，返回位置不許確問題。
5、關於a標籤結合changePage使用問題
若是點擊一個a標籤後，調用一個changePage轉到目標頁面，而在a標籤上，又設置了href="#id"屬性，這樣可能會致使點擊a標籤後， 頁面屢次跳轉問題。
解決方案，若是頁面使用了button那麼就使用changePage
若是頁面使用了href屬性，則在生成目標page後，不須要調用changePage事件。
*************************************************************************************
jquery mobile 事件 方法
1.觸摸屏事件—— Touch events tap Triggers after a quick, complete touch event. 本人實際測試效果：輕輕點擊，效果和按普通按鈕差很少。 taphold Triggers after a held complete touch event (close to one second). 本人實際測試效果：按住一下子，大約1秒，即觸發。很頂用。 swipe Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration. 本人實際測試效果：不懂，不會用 swipeleft Triggers when a swipe event occurred moving in the left direction. 本人實際測試效果：在觸摸屏幕上向左滑動，很好用。 PS：在電腦上你也能夠用，按住鼠標向左拖就能夠了。 swiperight Triggers when a swipe event occurred moving in the right direction. 本人實際測試效果：在觸摸屏幕上向右滑動，很好用。 PS：在電腦上你也能夠用，按住鼠標向右拖就能夠了。 使用方法：用live或者bind綁定到dom元素上便可，我是這麼用的（如下的相似）： $('#wlist').live('swipeleft',function(){ changepage('up'); }); 2.重力感應事件—— Orientation change event orientationchange Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an orientationproperty equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationChange is not natively supported. 對應於手機上重力感應功能，當顯示效果從垂直變爲水平，或由水平變爲垂直時觸發。本人沒用上該效果。 3.滾動條事件——Scroll events scrollstart Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts. 我的測試效果：當滾動條觸發時使用。 scrollstop Triggers when a scroll finishes. 我的測試效果：當滾動條中止時使用，利用這個你可讓其返回當前滾動條的位置信息並記錄下來。 $('body').live('scrollstop',function(){ $(‘#hidescroll’).val( $(this).scrollTop ); }); 上面用一個ID名爲hidescroll的影藏hidden控件保存了當前滾動條的位置信息。若是想使用後退頁面時返回當前滾動條的位置，就請把這個hidescroll的值一併傳輸過去吧，不管是用get仍是post。而且記得在頁面寫上： $(document).ready(function(){ // document.body.scrollTop = $(‘#hidescroll’).val();}); 4 頁面顯示影藏事件——Page show/hide events pagebeforeshow Triggered on the page being shown, before its transition begins. pagebeforehide Triggered on the page being hidden, before its transition begins. pageshow Triggered on the page being shown, after its transition completes. pagehide Triggered on the page being hidden, after its transition completes. 這四個事件的好處是，在頁面的加載過程當中你能夠幹些事。 好比，在加載的時候添加loading畫面： $('div').live('pagebeforeshow',function(){$.mobile.pageLoading();}); 在加載完成後影藏loading畫面： $('div').live('pageshow',function(){$.mobile.pageLoading(true);}); 5. 頁面建立事件：Page initialization events pagebeforecreate Triggered on the page being initialized, before initialization occurs. pagecreate Triggered on the page being initialized, after initialization occurs. 有時候你會遇到這種狀況：一個頁面，已經填寫了一些自定義信息，你須要依靠這些信息初始化一個新頁面。我遇到的例子是，個人文件列表一刷新，點擊其中任意一個文件能夠顯示一個對話框，這個對話框要顯示你點擊的這個文件的名字，和其餘操做。新頁面並不知道你點的是哪一個文件，總不能再查詢一遍吧？這個時候你就須要Page initialization events事件了，把你點擊的文件名傳過去。 $('#aboutPage').live('pagebeforecreate',function(event){ alert('This page was just inserted into the dom!'); }); $('#aboutPage').live('pagecreate',function(event){ alert('This page was just enhanced by jQuery Mobile!'); }); 上面是jquerymobile官網給出的兩個例子，,容許你操縱一個頁面pre-or-post初始化,相對於頁面顯示/隱藏事件，建立事件只會在初始化網頁的時起做用。 值得注意的是，在Jquerymobile 1.0a2版本，加載對話框等東西進來，實際是用ajax方法將對話框以div role="page"模式加入當前頁面。這個新加入的div,用ID保存它被ajax進來時的路徑。 例如，個人主頁mian.php有一個a標籤： <a href="dialog/search.php" type="GBK" data-rel="dialog" data-transition="slide" data-icon="search" data-iconpos="top" >簡單搜索</a> 點擊這個標籤的結果是，在mian.php中，被ajax加入了一個id="dialog/search.php"的div，這個div, role="page"，其內容就是文件search.php中body裏的內容。 這樣作，致使當下次再點擊同一個鏈接的時候，實際至關於顯示已被加載進來的page，加載速度固然很快。可是,這意味着你的ID屬性已經再也不是原來頁面的一部分，而是當前頁面的一個div，因此你必須記住當綁定到頁面,pagecreate事件(pagebeforecreate等等)。避免這個問題的方法是用class代替id。好在我在個人程序裏幾乎沒有遇到這個問題，由於我根本沒有用Page initialization events事件，在初始化一些對話框的時候，我在主頁的JS中作操做，修改對話框中的元素（由於我知道這些對話框顯示的時候就已是主頁的一個div了，我要的ID總會找到）。不過這樣作的結果是，Jquerymobile 1.0a3版本致使了我全部對話框的失效……算了，哥不更新了， 等beta版出來還不行麼。 6。經常使用函數、方法 顯示或影藏jquery自帶的loading畫面 //cue the page loader $.mobile.pageLoading(); //hide the page loader $.mobile.pageLoading( true ); 跳轉到另外一個頁面上 //transition to the "about us" page with a slideup transition $.mobile.changePage("about/us.html", "slideup"); //transition to the "search results" page, using data from a form with an ID of "search"" $.mobile.changePage({ url: "searchresults.php", type: "get", data: $("form#search").serialize() }); //transition to the "confirm" page with a "pop" transition without tracking it in history $.mobile.changePage("../alerts/confirm.html", "pop", false, false); 設置滾頓條位置 //scroll to Y 100px $.mobile.silentScroll(100); 設置根據顯示時寬度的最大最小信息設置html斷點，我沒用過，我猜會讓斷點之後的html不顯示。$.mobile.addResolutionBreakpoints (method)Add width breakpoints to the min/max width classes that are added to the HTML element. //add a 400px breakpoint $.mobile.addResolutionBreakpoints(400); //add 2 more breakpoints $.mobile.addResolutionBreakpoints([600,800]); 除此之外還有其餘一些方法，我都沒用過，也沒須要去用。等beta1的文檔出來了再看吧。 jqmData(), jqmRemoveData(), and jqmHasData() (method) $.mobile.path (methods, properties)Utilities for getting, setting, and manipulating url paths. TODO: document as public API is finalized. $.mobile.base (methods, properties)Utilities for working with generated base element. TODO: document as public API is finalized. $.mobile.activePage (property)