jquery mobile ajax跳转问题

问题:jqm页面跳转默认的为ajax跳转,不会加载跳转到的页面的css和js

首先在学jqm的时候发现的这个问题,后来和小明参加计算机设计大赛用jqm搭建的也遇到了这个问题,然后百度了.



解决方案:

1.禁止默认的ajax跳转,即在a链接中加入属性data-ajax="false"

2.将需要加载的js和css放置在属性为data-role="page"的div标签下面(JQM并未将整个页面加载到当前的dom中,仅将data-role="page"元素加入当前的dom中)


问题描述:

jquery mobile跳转页面$.mobile.changePage()从页面1跳转到页面2,  页面2里面加载的是页面1的js,要刷新页面2后才加载页面2的js,这个怎么处理?

原因/解决方案:

jQuerymobile 页面间跳转是动态加载的 所以从1跳到2,2里面的js是不会被执行的。而你在跳转到2那个页面后 你在去刷新页面 ,jq又会把他当成是第一个页面 而不是动态加载的那个页面,所以会去执行js。简单来说在ajax加载页面的情况下,除开第一个页面的js会执行外 其他加载进来的页面的js都不会执行。你要执行其他页面的js,那就

1
2
3
$("页面2id").on("pageshow",function(e){
//页面2显示时执行js部分
});
 不过上面这个方法

------------------------------------------我是可爱的分界线--------------------------------------

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.';
 
  
------------------------------------------我是可爱的分界线--------------------------------------

jquery mobile学习笔记:

1.jqm测试时放置在服务器下面

2.需要放置的弹窗或者面板放置在其链接下面,否则无效果

3.有些div或者效果需要加上position:absolute



你可能感兴趣的:(移动Web开发)