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)