请使用firefox,chrome等最新浏览器浏览本站。

Jquery mobile新手问题总汇 二

js+jquery 阿豹 484次浏览 0个评论 扫描二维码
jquerymobile官网http://jquerymobile.com
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'

 

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的一个比较严重的问题,希望下个版本可以解决此问题。

除了在8、为什么android2.3系统转屏无效果? 中提到的内容外,近日在群里聊天,南京-恰恰虎提出一个可以缓解的方案,即:可以更改jqm的css,让闪的背景色和页面的一致,具体修改以下css:

.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" );

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到