jQuery Mobile样式加载问题

转自：http://m.blog.csdn.net/blog/killzero/17259391

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
4000

                               

有几个方案：

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