Jquery Mobile中的自定义对话框
http://dev.jtsage.com/jQM-SimpleDialog/demos2/button.html

设置按钮的点击和划过的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手写html</title>
<script type="text/javascript" src="jquery-1.7.js"></script><!--换成自己的Jquery引用-->
<!-- 写javascript -->
<script type="text/javascript">
<span class="katex math inline">(function(){</span>("#1").mouseenter(function(){<span class="katex math inline">(this).css("background","red");});//鼠标在按钮上,设置red</span>("#1").mousedown(function(){<span class="katex math inline">(this).css("background","yellow");}).mouseup(function(){</span>(this).css("background","black");});//mousedown数遍按下时 设置为yellow，mouseup点击后变black
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input type="button" value="点击"  id="1"/&gt;
&lt;/body&gt;
&lt;/html&gt;

html中运行在移动客户端的浏览器中没有放大和缩小按钮。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

jQuery Mobile Data 属性

http://www.w3cschool.cc/jquerymobile/jquerymobile-ref-data.html

此文章将会持续更新，主要收录一些新手比较常见的问题。

欢迎 向我推荐比较典型的常见问题，我会记录并整理进文章，方便自己更方便大家。

#### 文章导读：
  - [1、页面缩放显示问题](http://www.wglong.com/main/artical!details?id=4#q1)
  
  - [2、页面跳转后样式丢失js失效](http://www.wglong.com/main/artical!details?id=4#q2)
  
  - [3、跳转时重复调用pageinit方法的解决办法](http://www.wglong.com/main/artical!details?id=4#q3)
  
  - [4、如何调用loading效果](http://www.wglong.com/main/artical!details?id=4#q4)
  
  - [5、动态改变了list的内容，但是内容并没有变化](http://www.wglong.com/main/artical!details?id=4#q5)
  
  - [6、把所有内容放到一个页面好,还是分开多页面好](http://www.wglong.com/main/artical!details?id=4#q6)
  
  - [7、如何禁掉ajax跳转](http://www.wglong.com/main/artical!details?id=4#q7)
  
  - [8、为什么android2.3系统转屏无效果？](http://www.wglong.com/main/artical!details?id=4#q8)
  
  - [9、如何去掉jqm自带的组件样式？](http://www.wglong.com/main/artical!details?id=4#q9)
  
  - [10、jquery mobile “闪屏” 问题](http://www.wglong.com/main/artical!details?id=4#q10)

2013/4/30 更新内容：

  - [11、按钮按下/划过的状态感觉反应有些迟缓？](http://www.wglong.com/main/artical!details?id=4#q11)

2013/5/1 更新内容：

  - [12、jquery mobile各类组件刷新方法](http://www.wglong.com/main/artical!details?id=4#q12)

2013/5/7 更新内容：

  - [13、在页面动态添加组件，发现css消失了](http://www.wglong.com/main/artical!details?id=4#q13)

2013/5/22 更新内容：

  - [14、关于checkbox取值问题](http://www.wglong.com/main/artical!details?id=4#q14)

2013/5/28 更新内容：

  - [15、点击屏幕，header和footer会略微抖动？](http://www.wglong.com/main/artical!details?id=4#q15)

2013/6/20 更新内容：

- [16、jqm图标|图标定位|隐藏图片上的文字|去除图标阴影|自定义图标|去除按钮阴影/圆角](http://www.wglong.com/main/artical!details?id=4#q16)

- [17、jqm组件显示正常，但是小图标是“空的”，没有正常显示](http://www.wglong.com/main/artical!details?id=4#q17)

- [18、$.mobile.changePage方法不能正常跳转](http://www.wglong.com/main/artical!details?id=4#q18)
##### 1页面缩放显示问题
<span class="label label-info" style="font-weight: bold; color: #ffffff;">问题描述：</span>





页面似乎被缩小了，屏幕太宽了。





<span class="label label-important" style="font-weight: bold; color: #ffffff;">解决办法：</span>





在head标签内加入：

&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

&nbsp;
2 页面跳转后样式丢失js失效
<span class="label label-info" style="font-weight: bold; color: #ffffff;">问题描述：</span>





用ajax跳转的时候，从a.html跳转到b.html后，b.html的css以及js都失效了。





<span class="label label-important" style="font-weight: bold; color: #ffffff;">解决办法：</span>





将当前页面需要用到的css以及js放在

div内。

<span class="label label-success" style="font-weight: bold; color: #ffffff;">原理：</span>





由于jqm的ajax跳转的时候，只会把b.html中

内的内容加载进dom,而 外的代码都不会加载，所以导致在 外的js和css都失效了。

&nbsp;
3 跳转时重复调用pageinit方法的解决办法
<span class="label label-info" style="font-weight: bold; color: #ffffff;">问题描述：</span>





用ajax跳转的时候，从a.html跳转到b.html，用从b.html返回a.html等等这种反复跳转的时候，pageinit方法内的代码会调用多次。





<span class="label label-important" style="font-weight: bold; color: #ffffff;">解决办法：</span>





在page中加入 data-dom-cache=&#8221;true&#8221;属性，如：

&lt;div data-role="page" id="myPage" data-dom-cache="true"&gt;

然后把pageinit方法换为pageshow,如：





&nbsp;

$("#myPage").live("pageshow", function() {
//...do something
});

&nbsp;
4 如何调用loading效果
<span class="label label-important" style="font-weight: bold; color: #ffffff;">js代码：</span>

//显示loading
function showLoading(){
<span class="katex math inline">.mobile.loadingMessageTextVisible = true;</span>.mobile.showPageLoadingMsg("a", "加载中..." );
}

//隐藏loading
function hideLoading(){
$.mobile.hidePageLoadingMsg();
}

[查看Demo »](http://www.wglong.com/index/demos/loading/index.html)





扫描查看Demo：

jqmDemo

&nbsp;
5 动态改变了list的内容，但是内容并没有变化
<span class="label label-important" style="font-weight: bold; color: #ffffff;">解决办法：</span>





调用组件的refresh方法，刷新list,如：

$("#contentList").append(content).listview('refresh');

<span class="label label-success" style="font-weight: bold; color: #ffffff;">原理：</span>





jqm组件的显示原理是把原始的web组件隐藏，而用jqm自定义的UI组件来代替原始的web组件显示。动态的改变了list的值，其实改变的是原始组件list的值，而jqm的list组件的值并没有被更新，所以需要调用list组件的refresh方法来使其更新并显示。
##### 注意:
  此问题不只局限于list组件，基本所有的jqm UI组件在改变值之后都需要调用组件对应的refresh方法，例如button组件( $(&#8216;#id&#8217;).button(&#8216;refresh&#8217;) )等等。更多刷新方法请查看：[jquery mobile各类组件刷新方法](http://www.wglong.com/main/artical!details?id=4#q12)

&nbsp;
6 把所有内容放到一个页面好,还是分开多页面好？
对于这个问题，说说笔者的个人见解：

#1所有内容放到同一页面 #2分页面存放内容 对于#1，如果是比较简单的网页内容，可以考虑把内容都放在同一个页面。但是如果页面结构很复杂，跳转页面比较多的话，那#1就会显得很臃肿，增加维护的复杂度。 而#2比较适合页面结构以及页面比较多的情况，易维护。 性能方面，笔者查了一些资料，也亲自做了些实验，并没有发现性能上的明显差异。 结论：根据个人编码习惯，两种选择都是可以的。推荐#1和#2混合使用。

&nbsp;
7 如何禁掉ajax跳转？
<span class="label label-info" style="font-weight: bold; color: #ffffff;">问题描述：</span>





尽管ajax跳转有很炫的转屏动画，但是在某些时候为了性能或者为了业务需求还是需要禁掉ajax跳转的。





<span class="label label-important" style="font-weight: bold; color: #ffffff;">解决办法：</span>





禁止ajxa跳转有两种情况：





1、禁止局部ajax跳转





2、禁止全局ajax跳转





对于#1只需要在a标签中添加下面的属性：

<span class="pln" style="color: #48484c;">data-ajax=“false”</span>

有时我们要用正常的http请求而不用Ajax请求，比如链接到别的网站等情况。通过给a标签加下面的属性，可以将链接指定为正常的http请求:

<span class="pln" style="color: #48484c;">rel</span><span class="pun" style="color: #93a1a1;">=</span><span class="pln" style="color: #48484c;">external</span>

对于#2我们需要设置一个全局的禁止ajax跳转的方式，js代码如下：

<span class="pln" style="color: #48484c;">$</span><span class="pun" style="color: #93a1a1;">(</span><span class="pln" style="color: #48484c;">document</span><span class="pun" style="color: #93a1a1;">).</span><span class="pln" style="color: #48484c;">bind</span><span class="pun" style="color: #93a1a1;">(</span><span class="str" style="color: #dd1144;">"mobileinit"</span><span class="pun" style="color: #93a1a1;">,</span><span class="kwd" style="color: #1e347b;">function</span><span class="pun" style="color: #93a1a1;">()</span><span class="pun" style="color: #93a1a1;">{</span><span class="com" style="color: #93a1a1;">// disable ajax nav</span><span class="pln" style="color: #48484c;">
  		$</span><span class="pun" style="color: #93a1a1;">.</span><span class="pln" style="color: #48484c;">mobile</span><span class="pun" style="color: #93a1a1;">.</span><span class="pln" style="color: #48484c;">ajaxEnabled</span><span class="pun" style="color: #93a1a1;">=</span><span class="kwd" style="color: #1e347b;">false</span><span class="pun" style="color: #93a1a1;">});</span>

<span class="label label-important" style="font-weight: bold; color: #ffffff;">注意：</span>上面的代码片段需要放在jquery.mobile-xxx.min.js引入之前。





顺便说一句，初始化的设置都需要放在此处，例如加载错误信息的设置：

<span class="pln" style="color: #48484c;">$</span><span class="pun" style="color: #93a1a1;">.</span><span class="pln" style="color: #48484c;">mobile</span><span class="pun" style="color: #93a1a1;">.</span><span class="pln" style="color: #48484c;">pageLoadErrorMessage </span><span class="pun" style="color: #93a1a1;">=</span><span class="str" style="color: #dd1144;">'Sorry, something went wrong. Please try again.'</span><span class="pun" style="color: #93a1a1;">;</span>

&nbsp;
8 为什么android2.3系统转屏无效果？
<span class="label label-info" style="font-weight: bold; color: #ffffff;">问题描述：</span>





发现在android2.X系统测试的时候slide等转屏效果并没有很好的显示，而是一闪而过了。但是在android4.0+显示却正常。





<span class="label label-important" style="font-weight: bold; color: #ffffff;">问题分析：</span>





之所以android2.X系统对slide等转屏效果支持不是很好，是因为slide等效果都需要3D支持，而android2.X系统不支持3D,





而JQM遇到这种情况的时候把slide等效果“退化”到淡入淡出效果，根据笔者的测试即使这种淡入淡出效果也不尽人意，感觉有点像“闪屏”，在这种情况下直接把转屏效果设置为none，反而比这种淡入淡出看着更舒服。





既然android2.X不支持3D转场，但是android4.0支持，我想在4.0系统保留转场效果，而在2.X上去除转场效果怎么办？





解决办法很简单，只需要加入下面的代码即可：

<span class="pln" style="color: #48484c;">$</span><span class="pun" style="color: #93a1a1;">.</span><span class="pln" style="color: #48484c;">mobile</span><span class="pun" style="color: #93a1a1;">.</span><span class="pln" style="color: #48484c;">transitionFallbacks</span><span class="pun" style="color: #93a1a1;">.</span><span class="pln" style="color: #48484c;">slideout </span><span class="pun" style="color: #93a1a1;">=</span><span class="str" style="color: #dd1144;">"none"</span>

更多关于“闪屏”的问题，请看：[10、jquery mobile “闪屏” 问题](http://www.wglong.com/main/artical!details?id=4#q10)

&nbsp;
9 如何去掉jqm自带的组件样式？
<span class="label label-info" style="font-weight: bold; color: #ffffff;">问题描述：</span>





尽管jqm提供了比较美观的组件样式，但是有些时候我们需要去掉jqm自带的样式。





<span class="label label-important" style="font-weight: bold; color: #ffffff;">解决办法：</span>





解决办法很简单，只需要在组件中加上如下属性就可以了：

<span class="pln" style="color: #48484c;">data-role='none'</span>

&nbsp;
10 jquery mobile “闪屏” 问题
<span class="label label-info" style="font-weight: bold; color: #ffffff;">官方描述：</span>

<span class="typ" style="color: teal;">Important</span><span class="pun" style="color: #93a1a1;">:</span><span class="typ" style="color: teal;">Some</span><span class="pln" style="color: #48484c;"> platforms currently have issues </span><span class="kwd" style="color: #1e347b;">with</span><span class="pln" style="color: #48484c;"> transitions</span><span class="pun" style="color: #93a1a1;">.</span><span class="typ" style="color: teal;">We</span><span class="pln" style="color: #48484c;"> are working on a solution to solve the problem </span><span class="kwd" style="color: #1e347b;">for</span><span class="pln" style="color: #48484c;"> everyone</span><span class="pun" style="color: #93a1a1;">.</span><span class="typ" style="color: teal;">If</span><span class="pln" style="color: #48484c;"> you are experiencing flickers </span><span class="kwd" style="color: #1e347b;">and</span><span class="pln" style="color: #48484c;"> flashes during </span><span class="kwd" style="color: #1e347b;">or</span><span class="pln" style="color: #48484c;"> at the </span><span class="kwd" style="color: #1e347b;">end</span><span class="pln" style="color: #48484c;"> of a transition we suggest the following workaround</span><span class="pun" style="color: #93a1a1;">.</span><span class="typ" style="color: teal;">Please</span><span class="pln" style="color: #48484c;"> note that </span><span class="kwd" style="color: #1e347b;">this</span><span class="pln" style="color: #48484c;"> workaround should be thoroughly tested on the target platform before deployment</span><span class="pun" style="color: #93a1a1;">.</span><span class="typ" style="color: teal;">This</span><span class="pln" style="color: #48484c;"> workaround </span><span class="kwd" style="color: #1e347b;">is</span><span class="pln" style="color: #48484c;"> known to cause performance issues </span><span class="kwd" style="color: #1e347b;">and</span><span class="pln" style="color: #48484c;"> browser crashes on some platforms</span><span class="pun" style="color: #93a1a1;">,</span><span class="pln" style="color: #48484c;"> especially </span><span class="typ" style="color: teal;">Android</span><span class="pun" style="color: #93a1a1;">.</span><span class="typ" style="color: teal;">Add</span><span class="pln" style="color: #48484c;"> the following code to your custom css</span><span class="pun" style="color: #93a1a1;">.</span><span class="pun" style="color: #93a1a1;">.</span><span class="pln" style="color: #48484c;">ui</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">page </span><span class="pun" style="color: #93a1a1;">{</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">webkit</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">backface</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">visibility</span><span class="pun" style="color: #93a1a1;">:</span><span class="pln" style="color: #48484c;"> hidden</span><span class="pun" style="color: #93a1a1;">;</span><span class="pun" style="color: #93a1a1;">}</span>

即使加上官方提供的css代码片段，效果仍旧不尽人意，这个问题到现在仍旧是jqm的一个比较严重的问题，希望下个版本可以解决此问题。





除了在[8、为什么android2.3系统转屏无效果？](http://www.wglong.com/main/artical!details?id=4#q8) 中提到的内容外，近日在群里聊天，[**南京-恰恰虎**](http://www.wglong.com/main/artical!details?id=4#)提出一个可以缓解的方案，即：可以更改jqm的css,让闪的背景色和页面的一致，具体修改以下css:

<span class="pun" style="color: #93a1a1;">.</span><span class="pln" style="color: #48484c;">ui</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">body</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">c</span><span class="pun" style="color: #93a1a1;">,</span><span class="pun" style="color: #93a1a1;">.</span><span class="pln" style="color: #48484c;">ui</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">overlay</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">c </span><span class="pun" style="color: #93a1a1;">{</span><span class="pln" style="color: #48484c;">
border</span><span class="pun" style="color: #93a1a1;">:</span><span class="lit" style="color: #195f91;">1px</span><span class="pln" style="color: #48484c;"> solid </span><span class="com" style="color: #93a1a1;">#AAA;</span><span class="pln" style="color: #48484c;">
color</span><span class="pun" style="color: #93a1a1;">:</span><span class="com" style="color: #93a1a1;">#333;</span><span class="pln" style="color: #48484c;">
background</span><span class="pun" style="color: #93a1a1;">:</span><span class="com" style="color: #93a1a1;">#F9F9F9; //修改这里的颜色代码</span><span class="pun" style="color: #93a1a1;">}</span>

我想这是一个很好的思路，是个值得一试的方法，但是笔者还没有亲自实验，需要的朋友可以亲自试一试，有空的话记得回来在评论里发表一下实验结果哦。

 

&nbsp;
11 按钮按下/划过的状态感觉反应有些迟缓？
解决办法很简单，只需要加上如下设置就可以了：

<span class="pln" style="color: #48484c;">$.mobile.buttonMarkup.hoverDelay = "false";</span>

&nbsp;
12 jquery mobile各类组件刷新方法
1、Combobox or select dropdowns

<span class="pln" style="color: #48484c;">var myselect = <span class="katex math inline">("#sCountry");
myselect[0].selectedIndex = 3;
myselect.selectmenu('refresh');
or</span>( ".selector" ).selectmenu( "refresh", true );</span>

2、Listviews

<span class="pln" style="color: #48484c;">$('#mylist').listview('refresh');</span>

3、Slider control

<span class="pln" style="color: #48484c;">$('#slider').val(80).slider('refresh');</span>

4、Toggle switch

<span class="pln" style="color: #48484c;">var myswitch = $("#toggle");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");</span>

5、Radio buttons

<span class="pln" style="color: #48484c;">$("input[value=grid]").attr('checked',true).checkboxradio('refresh');
or
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );</span>

6、Checkboxes

<span class="pln" style="color: #48484c;">$('#checkbox-1').attr('checked',true).checkboxradio('refresh');
or
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );</span>

7、Buttons

<span class="pln" style="color: #48484c;">$( "[type='submit']" ).button( "refresh" );
or
$( ".selector" ).buttonMarkup( "refresh" );</span>

8、Column-Toggle Table

<span class="pln" style="color: #48484c;">$( ".selector" ).table-columntoggle( "refresh" );</span>

9、Reflow Table

<span class="pln" style="color: #48484c;">$( ".selector" ).table( "refresh" );</span>

&nbsp;
13 在页面动态添加组件，发现css消失了
首先请试一试上面问题12的解决方案，如果没有效果的话，那就试试加上.trigger(&#8216;create&#8217;)，例如：

<span class="pln" style="color: #48484c;">$("#id").html(content).trigger('create');
or
$.mobile.pageContainer.trigger("create");</span>

&nbsp;
14 关于checkbox取值问题
网友[**流浪的旋律**](http://www.wglong.com/main/artical!details?id=4#)在checkbox取值的时候，发现官网并没有提供相关方法，通过查阅资料终于找到了取值方法，并找到我分享在此，再次感谢[**流浪的旋律**](http://www.wglong.com/main/artical!details?id=4#)的分享精神！





取值方式如下：

<span class="pln" style="color: #48484c;">$(.checkbox)[0].checked</span>

[查看checkbox取值Demo »](http://www.wglong.com/index/demos/checkboxGetValue/checkboxGetValue.html)





[下载checkbox取值Demo »](http://www.wglong.com/index/demos/checkboxGetValue/checkboxGetValue.zip)

&nbsp;
15 点击屏幕，header和footer会略微抖动？
<span class="label label-info" style="font-weight: bold; color: #ffffff;">问题描述：</span>





在真机运行的时候，轻击屏幕会发现header和footer有略微的抖动。





<span class="label label-important" style="font-weight: bold; color: #ffffff;">解决办法：</span>





在header和footer中添加如下属性：

<span class="pln" style="color: #48484c;">data-tap-toggle="false"</span>

添加这个属性也可以解决点击屏幕header或footer消失问题。

&nbsp;
16 jqm图标|图标定位|隐藏图片上的文字|去除图标阴影|自定义图标|去除按钮阴影/圆角
**1、图标定位 data-iconpos**





默认情况下，所有的图标都放在按钮的按钮文本左。此默认可以覆盖使用 data-iconpos 属性来设置图标的右上方（top）、底部（bottom）、右侧（right）、左侧（left）的文本





**2、隐藏图片上的文字 data-iconpos=”notext”**





你也可以创建一个图标按钮，设置 data-iconpos=”notext”。按钮插件将隐藏的文字在屏幕上，但把它作为给屏幕阅读器和设备支持工具提示上下文链接标题属性。例如，data-iconpos=”right”，data-iconpos=”notext”：





**3、自定义图标 data-icon=”自定义值”**





使用自定义图标，需要指定 data-icon 值。Jquery Mobile的button插件会将生成一个CSS类，它的前缀是ui-icon- ，后面的是data-icon值。假如：有一个按钮 data-icon 属性的值为 myapp-email，即 data-icon=“ myapp-email”。那么生产的CSS类是：ui-icon-myapp-email。





然后你可以在你的样式表写一个CSS规则来定义 ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性，请创建一个白色18×18像素的PNG-8图标，并且保存为Alpha透明度。

<span class="pun" style="color: #93a1a1;">.</span><span class="pln" style="color: #48484c;">ui</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">icon</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">myapp</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">email </span><span class="pun" style="color: #93a1a1;">{</span><span class="pln" style="color: #48484c;">
  background</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">image</span><span class="pun" style="color: #93a1a1;">:</span><span class="pln" style="color: #48484c;"> url</span><span class="pun" style="color: #93a1a1;">(</span><span class="str" style="color: #dd1144;">"app-icon-email.png"</span><span class="pun" style="color: #93a1a1;">);</span><span class="pun" style="color: #93a1a1;">}</span>

这将创建标准分辨率的图标，但许多设备都有非常高的分辨率的显示器，就像iPhone 4的视网膜显示器。添加一个高清图标，创建一个图标，36X36像素（18像素大小完全相同的两倍），并添加第二个规则使用WebKit分钟装置像素比例：2。媒体查询到目标的规则只有以高分辨率显示器。指定背景图片高清图标文件和设置背景像素大小18×18将安装36个像素图标到同一个18像素的空间。传媒查询块可以用多个图标规则：

<span class="lit" style="color: #195f91;">@media</span><span class="pln" style="color: #48484c;"> only screen </span><span class="kwd" style="color: #1e347b;">and</span><span class="pun" style="color: #93a1a1;">(-</span><span class="pln" style="color: #48484c;">webkit</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">min</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">device</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">pixel</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">ratio</span><span class="pun" style="color: #93a1a1;">:</span><span class="lit" style="color: #195f91;">2</span><span class="pun" style="color: #93a1a1;">)</span><span class="pun" style="color: #93a1a1;">{</span><span class="pun" style="color: #93a1a1;">.</span><span class="pln" style="color: #48484c;">ui</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">icon</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">myapp</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">email </span><span class="pun" style="color: #93a1a1;">{</span><span class="pln" style="color: #48484c;">
    background</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">image</span><span class="pun" style="color: #93a1a1;">:</span><span class="pln" style="color: #48484c;"> url</span><span class="pun" style="color: #93a1a1;">(</span><span class="str" style="color: #dd1144;">"app-icon-email-highres.png"</span><span class="pun" style="color: #93a1a1;">);</span><span class="pln" style="color: #48484c;">
    background</span><span class="pun" style="color: #93a1a1;">-</span><span class="pln" style="color: #48484c;">size</span><span class="pun" style="color: #93a1a1;">:</span><span class="lit" style="color: #195f91;">18px</span><span class="lit" style="color: #195f91;">18px</span><span class="pun" style="color: #93a1a1;">;</span><span class="pun" style="color: #93a1a1;">}</span><span class="pun" style="color: #93a1a1;">...</span><span class="pln" style="color: #48484c;">more HD icon rules go here</span><span class="pun" style="color: #93a1a1;">...</span><span class="pun" style="color: #93a1a1;">}</span>

4、去除按钮阴影/圆角

<span class="pln" style="color: #48484c;">data-shadow=”false”
data-corners=”false”</span>

本小结引自：http://www.wpdic.com/?p=59

&nbsp;
17 jqm组件显示正常，但是小图标是“空的”，没有正常显示
<span class="label label-info" style="font-weight: bold; color: #ffffff;">问题描述：</span>





例如header中的返回按钮，按钮的显示和功能都正常，但是按钮上的“返回小图标”没有显示。





<span class="label label-important" style="font-weight: bold; color: #ffffff;">解决办法：</span>





这是由于没有引入jqm的图片文件引起的，解决方法是在jqm的资源包里找到images文件夹，并把images文件夹引入自己的项目，与jqm的css文件放在同一级目录里。

&nbsp;
18 $.mobile.changePage方法不能正常跳转
<span class="label label-info" style="font-weight: bold; color: #ffffff;">问题描述：</span>





$.mobile.changePage不能跳转，而window.location.href却可以正常跳转。





<span class="label label-success" style="font-weight: bold; color: #ffffff;">原理：</span>





这个问题牵扯到jqm的跳转机制了，简单的说jqm的默认跳转方式，也就是$.mobile.changePage这种方式，原理是ajax跳转。听起来很神秘，其实就是通过ajax动态的把目标页面的内容加载到当前的dom中。当多页面跳转的时候，通过ajax跳转，就存在ajax跨域的问题。所以解决目前的问题，其实就是解决ajax跨域的问题。





<span class="label label-important" style="font-weight: bold; color: #ffffff;">解决办法：</span>





为了解决跨域问题，我们需要把项目放在服务器环境下。好多朋友不知道什么叫服务器环境，说白了就是把项目部署到WAMP或者TOMCAT等等的服务器下，然后通过http://localhost/xxx 这样的方式访问项目。





小结：这里提到了jqm的跳转机制了，笔者之前写过一篇文章：[JQM进阶:转屏效果的模拟实现](http://www.wglong.com/main/artical!details?id=17)，这篇文章完全没有用jqm，而是模拟了jqm的跳转过程，想深入了解jqm跳转的朋友可以看一看这篇文章的实现原理。

 

19 …还有什么需要补充问题？ 请联系我

 

原创文章，转载请注明出处：http://www.wglong.com/main/artical!details?id=4