Jquery Mobile新手问题汇总

1、页面缩放显示问题
问题描述：
页面似乎被缩小了，屏幕太宽了。

解决办法：
在head标签内加入：
<meta name="viewport" content="width=device-width, initial-scale=1">
2、页面跳转后样式丢失js失效
问题描述：
用ajax跳转的时候，从a.html跳转到b.html后，b.html的css以及js都失效了。

解决办法：
将当前页面需要用到的css以及js放在<page>div内。

原理：
由于jqm的ajax跳转的时候，只会把b.html中<page>内的内容加载进dom,而<page>外的代码都不会加载，所以导致在<page>外的js和css都失效了。

3、跳转时重复调用pageinit方法的解决办法
问题描述：
用ajax跳转的时候，从a.html跳转到b.html，用从b.html返回a.html等等这种反复跳转的时候，pageinit 方法内的代码会调用多次。

解决办法：
在page中加入 data-dom-cache="true"属性，如：
<div data-role="page" id="myPage" data-dom-cache="true">
4、动态改变了list的内容，但是内容并没有变化
解决办法：
调用组件的refresh方法，刷新list,如：
$("#contentList").append(content).listview('refresh');
原理：
jqm组件的显示原理是把原始的web组件隐藏，而用jqm自定义的UI组件来代替原始的web组件显示。

动态的改变了list的值，其实改变的是原始组件list的值，而jqm的list组件的值并没有被更新，所以需要调用list组件的refresh方法来使其更新并显示。

注意:
此问题不只局限于list组件，基本所有的jqm UI组件在改变值之后都需要调用组件对应的refresh方法，例如button组件( $('#id').button('refresh') )等等。

5、如何禁掉ajax跳转？
问题描述：
尽管ajax跳转有很炫的转屏动画，但是在某些时候为了性能或者为了业务需求还是需要禁掉ajax跳转的。

解决办法：
禁止ajxa跳转有两种情况：
1、禁止局部ajax跳转
只需要在a标签中添加下面的属性：
data-ajax=“false”
有时我们要用正常的http请求而不用Ajax请求，比如链接到别的网站等情况。

通过给a标签加下面的属性，可以将链接指定为正常的http请求:
rel=external
2、禁止全局ajax跳转
我们需要设置一个全局的禁止ajax跳转的方式，js代码如下：
$(document).bind("mobileinit", function() {
// disable ajax nav
$.mobile.ajaxEnabled=false
});
注意：上面的代码片段需要放在jquery.mobile-xxx.min.js引入之前。

顺便说一句，初始化的设置都需要放在此处，例如加载错误信息的设置：
$.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.';
6、如何去掉jqm自带的组件样式？
问题描述：
尽管jqm提供了比较美观的组件样式，但是有些时候我们需要去掉jqm自带的样式。

解决办法：
解决办法很简单，只需要在组件中加上如下属性就可以了：
data-role='none'
7、点击屏幕，header和footer会略微抖动？
问题描述：
在真机运行的时候，轻击屏幕会发现header和footer有略微的抖动。

解决办法：
在header和footer中添加如下属性：
data-tap-toggle="false"
添加这个属性也可以解决点击屏幕header或footer消失问题。