Jquery Mobile 技巧，常见问题，解决方案

阅读更多

1、强制覆盖模版的背景色

.ui-page{
     background:#ffffff;
}

说明：这段样式必须放在Jquery Mobile 模版样式的下方，这样才能进行覆盖。

2、禁止截断过长的列表和按钮内容
在jQuery mobile中，如果列表或者按钮中文字的内容过长，jQuery Mobile会自动截断其超过长度的内容。

1）设置按钮样式

.ui-btn-text {  
white-space: normal;  
} 

2）设置列表样式

.ui-li-desc {  
white-space: normal;  
}  

说明：这段样式必须放在Jquery Mobile 模版样式的下方，这样才能进行覆盖。如果不想设置全局的覆盖，那么只要在用到的地方写行内样式。
恢复截断的样式 white-space: nowrap;

3、移除项目列表中a标签的箭头

默认情况下，jQuery Mobile框架会为每一个列表项中带a标签的添加一个箭头，想要禁用箭头显示，需要在想要移除列表项设置data-icon="false"。

4、jQuery mobile 中使用$(document).ready(function() {});问题

由于jQuery mobile框架的影响，所有的链接请求都会被处理成ajax形式的请求，这样依赖document ready只会执行一次。
1）方法1，初始发中配置

$.mobile.ajaxEnabled = false;

2）方法2，用其他监听事件代替，如下所示

$("div[data-role='page']").bind('pageshow',function(event,ui){
    // do something
});

5、Jquery Mobile忽略页面中数字为电话号码，因为不这样处理的话，部分数据的样式会受到影响。

6、jquerymobile动态添加元素之后有些不能被正确渲染的解决方法：
1）listview：$(".list").listview("refresh");
2）div或其他元素：$(".list") .trigger( "create" );