jQueryMobile开发时，遇到的一些问题记录


一、动态加载页面问题


1.存在这样一个页面布局：

   main.html 为主界面A,B为该页面中的三个page，其中A为splitview左部分页面，B为右半部页面

   a1.html 为一个独立的页面

   a2.html为一个独立的页面

2.在main.html中有这样一段script

   $("#A1").live("pagecreate",function(){

     $.getScript("a1.js", function(){

       $.mobile.changePage(a1.html',{transition: "none",changeHash:false});

     });    

   });

   而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容器。



二、动态生成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');

问题成功解决。



三、splitview导航时，导航标签所在页面消失。

存在场景，L为splitview的左部分，R为splitview的右部分。

在L容器中，存在

<li><a id="a1"  href="#d1">导航1</a></li>

<li><a id="a2" οnclick="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部分即可。



四、header上增加返回按钮时，导致header变高

我的header部分是动态生成的。根据业务需要，有的page需要返回按钮，有的page不需要。业务详情共用一个page,每次点击后，根据业务信息更新header及业务情况，决定是否显示返回按钮。

我的方法：

在header中加入一个按钮header.append('<a οnclick="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超高问题，返回位置不准确问题。


五、关于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)