jQuery Mobile样式加载问题

RT。我是初步接触jQuery Mobile.刚开始使用,在进行页面跳转时,发生了问题。

问题描述:A.html为首页,点击导航之后进入B.html页面,在B.html页面,通过一个<a>标签跳转回到首页A.html。其中,A.html页面没有加载jQuery Mobile的js和css库。B页面使用了jQuery Mobile的js和css库。点击跳转标签,跳转到A.html后A页面内所有css和js都失效。

问题分析:在jQuery Mobile中,页面跳转默认使用ajax进行。这样子会将JQM的样式默认带入我们没有使用JQM的A页面,而A页面没有夹在<div data-role="page">标签中的css和js都将失效。

解决方法:根据网上的解决方法的综合,方法有:<a>标签中加入属性data-ajax="false"来禁用页面的ajax跳转,转而使用默认的http请求页面。 这是网上牛人给的解决思路:(转载自)http://suchso.com/Jquery-JqueryMobile/jquerymobilepageinitjsexec.html

                               

有几个方案:

1.可以用两种方法来解决:一是在index页面中,注册所有需要使用到的外部JS文件,或者使用母版页面来统一;二是将页面内部JS写在data-role="page"标签下,这样无论页面怎样跳转,均可以运行。

2.关闭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.';
其他的问题:

        假如,你的页面如果这个按钮是返回上一级的页面,JQM有一个默认的方法可以用,你可以在<a>标签中添加data-rel="back"来使用返回上一级页面的功能。又或者,可以使用href="javascript:window.history.go(-1)" data-ajax="false"两个标签。 

下面这个博客也给我解决问题提供了思路:感谢这位博主:

文章链接:

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

JQM专题链接:

http://www.wglong.com/main/artical!findByGroup?gId=1


你可能感兴趣的:(jquery,mobile,JQM,ajax跳转,DOM样式)