JqueryMobile新手问题大全

2013-04-22 / 分类:JqueryMobile / 标签:JqueryMobile,Jqmcss

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

欢迎向我推荐比较典型的常见问题，我会记录并整理进文章，方便本身更方便你们。jquery

文章导读：

2013/6/20 更新内容：

1页面缩放显示问题

问题描述：android

页面彷佛被缩小了，屏幕太宽了。web

解决办法：ajax

在head标签内加入：跨域

<meta name="viewport" content="width=device-width, initial-scale=1">

2 页面跳转后样式丢失js失效

问题描述：服务器

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

解决办法：dom

将当前页面须要用到的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比较适合页面结构以及页面比较多的状况，易维护。
性能方面，笔者查了一些资料，也亲自作了些实验，并无发现性能上的明显差别。
结论：根据我的编码习惯，两种选择都是能够的。推荐#1和#2混合使用。

7 如何禁掉ajax跳转？

问题描述：

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

解决办法：

禁止ajxa跳转有两种状况：

一、禁止局部ajax跳转

二、禁止全局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"

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

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

问题描述：

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

解决办法：

解决办法很简单，只须要在组件中加上以下属性就能够了：

data-role='none'

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各种组件刷新方法

一、Combobox or select dropdowns

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

二、Listviews

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

三、Slider control

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

四、Toggle switch

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

五、Radio buttons

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

六、Checkboxes

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

七、Buttons

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

八、Column-Toggle Table

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

九、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图标|图标定位|隐藏图片上的文字|去除图标阴影|自定义图标|去除按钮阴影/圆角

一、图标定位 data-iconpos

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

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

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

三、自定义图标 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... }

四、去除按钮阴影/圆角

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

JqueryMobile新手问题大全

Jquery mobile 新手问题总汇

文章导读：

2013/4/30 更新内容：

2013/5/1 更新内容：

2013/5/7 更新内容：

2013/5/22 更新内容：

2013/5/28 更新内容：

2013/6/20 更新内容：

1页面缩放显示问题

2 页面跳转后样式丢失js失效

3 跳转时重复调用pageinit方法的解决办法

4 如何调用loading效果

5 动态改变了list的内容，可是内容并无变化

注意:

6 把全部内容放到一个页面好,仍是分开多页面好？

7 如何禁掉ajax跳转？

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

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

10 jquery mobile “闪屏” 问题

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

12 jquery mobile各种组件刷新方法

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

14 关于checkbox取值问题

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

16 jqm图标|图标定位|隐藏图片上的文字|去除图标阴影|自定义图标|去除按钮阴影/圆角

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

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