Jquery mobile 新手问题总汇

Posted on 2016-04-09 11:37 ☆Keep★Moving☆ 阅读(185) 评论(0) 编辑收藏举报

http://www.wglong.com/main/artical!details?id=4#q9

2013-04-22 / 分类:JqueryMobile / 标签:JqueryMobile,Jqm,jquerymobile教程，jqm教程

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

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

文章导读：

2013/6/20 更新内容：

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">

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

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

4 如何调用loading效果

js代码：

//显示loading
function showLoading(){
$.mobile.loadingMessageTextVisible = true;
$.mobile.showPageLoadingMsg("a", "加载中..." );
}

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

查看Demo »

扫描查看Demo：

5 动态改变了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') )等等。更多刷新方法请查看：jquery mobile各类组件刷新方法

6 把所有内容放到一个页面好,还是分开多页面好？

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

7 如何禁掉ajax跳转？

问题描述：

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

解决办法：

禁止ajxa跳转有两种情况：

1、禁止局部ajax跳转

2、禁止全局ajax跳转

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

data-ajax=“false”

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

rel=external

对于#2我们需要设置一个全局的禁止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.';

8 为什么android2.3系统转屏无效果？

问题描述：

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

问题分析：

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

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

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

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

$.mobile.transitionFallbacks.slideout = "none"

更多关于“闪屏”的问题，请看：10、jquery mobile “闪屏” 问题

9 如何去掉jqm自带的组件样式？

问题描述：

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

解决办法：

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

data-role='none'

或者在mobileinit事件中对keepNative选项进行配置

$(document).bind('mobileinit',function(){  
    $.mobile.keepNative = "select, input.foo, textarea.bar";  
});

10 jquery mobile “闪屏” 问题

官方描述：

Important: Some platforms currently have issues with transitions. We are working on a solution to solve the problem for everyone. If you are experiencing flickers and flashes during or at the end of a transition we suggest the following workaround. Please note that this workaround should be thoroughly tested on the target platform before deployment. This workaround is known to cause performance issues and browser crashes on some platforms, especially Android. Add the following code to your custom css.

.ui-page { -webkit-backface-visibility: hidden; }

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

.ui-body-c, .ui-overlay-c {
 border: 1px solid #AAA;
 color: #333;
 background: #F9F9F9; //修改这里的颜色代码
}

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

11 按钮按下/划过的状态感觉反应有些迟缓？

解决办法很简单，只需要加上如下设置就可以了：

$.mobile.buttonMarkup.hoverDelay = "false";

12 jquery mobile各类组件刷新方法

1、Combobox or select dropdowns

var myselect = $("#sCountry");
 myselect[0].selectedIndex = 3;
 myselect.selectmenu('refresh');
or
$( ".selector" ).selectmenu( "refresh", true );

2、Listviews

$('#mylist').listview('refresh');

3、Slider control

$('#slider').val(80).slider('refresh');

4、Toggle switch

var myswitch = $("#toggle");
 myswitch[0].selectedIndex = 1;
 myswitch .slider("refresh");

5、Radio buttons

$("input[value=grid]").attr('checked',true).checkboxradio('refresh');
or
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );

6、Checkboxes

$('#checkbox-1').attr('checked',true).checkboxradio('refresh');
or
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );

7、Buttons

$( "[type='submit']" ).button( "refresh" );
or
$( ".selector" ).buttonMarkup( "refresh" );

8、Column-Toggle Table

$( ".selector" ).table-columntoggle( "refresh" );

9、Reflow Table

$( ".selector" ).table( "refresh" );

13 在页面动态添加组件，发现css消失了

首先请试一试上面问题12的解决方案，如果没有效果的话，那就试试加上.trigger('create')，例如：

$("#id").html(content).trigger('create');
or
$.mobile.pageContainer.trigger("create");

14 关于checkbox取值问题

取值方式如下：

$(.checkbox)[0].checked

查看checkbox取值Demo »

下载checkbox取值Demo »

15 点击屏幕，header和footer会略微抖动？

问题描述：

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

解决办法：

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

data-tap-toggle="false"

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

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透明度。

.ui-icon-myapp-email {
  background-image: url( "app-icon-email.png" );
}

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

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .ui-icon-myapp-email {
    background-image: url( "app-icon-email-highres.png" );
    background-size: 18px 18px;
  }
  ...more HD icon rules go here...
}

4、去除按钮阴影/圆角

data-shadow=”false”
data-corners=”false”

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

17 jqm组件显示正常，但是小图标是“空的”，没有正常显示

问题描述：

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

解决办法：

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

18 $.mobile.changePage方法不能正常跳转

问题描述：

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

原理：

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

解决办法：

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

小结：这里提到了jqm的跳转机制了，笔者之前写过一篇文章：JQM进阶:转屏效果的模拟实现，这篇文章完全没有用jqm，而是模拟了jqm的跳转过程，想深入了解jqm跳转的朋友可以看一看这篇文章的实现原理。

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

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

刷新页面返回顶部

☆Keep★Moving☆

公告