http://blog.csdn.net/chen052210123/article/details/7481578

页面跳转：

页面跳转时pagebeforechange事件会被触发两次，通过$(document).bind("pagebeforechange", handleChangePage);来绑定pagebeforechange事件的触发函数handleChangePage(e,data),第一次触发时data.toPage是到达页面的url，类型是string。第二次触发时data.toPage是e.fn.e.init[1](搞不懂具体是什么东西)。

第二次触发时可以获取到达页面的信息，因此可以在第二次触发时来增加自己的操作，也就是if(typeof data.toPage != “string”).这时可以用e.target.baseURI来获取到达页面的uri，类型是string，然后就可以分析出参数等一些东西。

利用e.target.find(“pageId”)来获取到达页的相应元素加以控制。

“get”方式提交时可以直接解析e.target.baseURI来获取参数

“post”方式提交时可以分析data.options.data来获取参数。也可以在changePage里利用$(“form”).serializeArray()转换为JSON对象（这种方式比较好）或者$(“form”).serialize()转换成字符串。

如果发生中文乱码问题，可以尝试使用decodeURIComponent(str)进行解码。

代码实例：

index.html

<!DOCTYPE html> 
<html class="ui-mobile"> 
<head> 
<title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 
<META HTTP-EQUIV="expires" CONTENT="0"> 
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" charset="utf-8">

$( document ).delegate("#index", "pageinit", function() {
$(document).bind( "pagebeforechange", beforechange);

});
function beforechange( e, data ) {
if ( typeof data.toPage != "string" ) {
var url = $.mobile.path.parseUrl(e.target.baseURI),
re = /a.html/;
if(url.href.search(re) != -1){
var page = $(e.target).find("#a2");
var d = data.options.data;
page.find("#s").append(decodeURIComponent(d));
}
}
}
</script>
</head>

<body> 
<div data-role="page" id="index"> 
<div data-role="header">.header.</div> 
<div data-role="content">
<a href="dir1/a.html?p1=112&p2=113">a.html</a><br>
<div id="ccc"><a href="#c" id="cc">cccccc</a><br></div>
<a href="dir2/b.html" data-rel="dialog" data-transition="pop">Open dialog</a>
<form action="a.html" method="post">
姓名：<input type="text" value="23" name="name"/><br>
密码：<input type="text" value="过后" name="pwd"/><br>
<input type="submit" value="submit"/>
</form>
</div> 
<div data-role="footer" data-position="fixed">footer</div> 
</div>
</body></html>

a.html

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 
<META HTTP-EQUIV="expires" CONTENT="0">
<meta charset="utf-8">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>

</head>
<body>

<div data-role="page" id="a2" >
<div data-role="header">
.header.
</div>
<div data-role="content">
<a href="../dir2/b.html" >b.html</a>
<br>
<a data-rel="back" href="b.html">back</a>
<div id="s"></div>
</div>
<div data-role="footer" data-position="fixed">
footer
</div>
</div>
</body>
</html>

Jquerymobile加载页面相关知识：

如果采用ajax的方式链接到一个有多page的文档doc1，那么只会加载第一个page，这时就无法在这个page上链接到文档doc1上的其他page了。利用subpage插件可以实现多page文档的加载。

使用ajax方式来跳转到下一个文档时，由于jquerymobile框架的限制不会加载<div data-role=”page”></div>外面的js和css资源，所以把应当把js和css代码放到<divdata-role=”page”></div>里面。

Jquerymobile中推荐在捕获pageinit事件的函数中来操作page里的元素。例：

$( document).delegate("#aboutPage", "pageinit", function() {

alert('Apage with an ID of "aboutPage" was just created by jQuery Mobile!');

});

预加载页面

1、<ahref="prefetchThisPage.html"data-prefetch> ... </a>

2、$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

使用单一页面模式时，通过以上两种方式Jquerymobile会在主界面加载后在后台加载预加载的文件，同时会触发pagecreate事件。

这样能够流畅地转移到预加载的页面而不会显示加载的信息

缓存页面

保留所有访问过的页面

$.mobile.page.prototype.options.domCache = true;

缓存特定的页面

<div data-role="page" id="cacheMe" data-dom-cache="true">
pageContainerElement.page({ domCache: true });

Hash和Ajax页面驱动模型：

通过Ajax形式来跳转页面时，会触发hashchange 事件，jquerymobile在处理这个事件时会修改location.href的值。

Jquerymobile是通过给页面添加 "ui-page-active" 样式来设置显示的页面的。

pushState 插件：

jquerymobile利用 history.replaceState函数将基于hash的长的url转换为更加简洁的完整的文档地址。如果浏览器不支持 history.replaceState，或者禁用了这一特性，地址栏就会显示基于hash的url（就是带#的url）。

Jquerymobile这时会触发hashchange事件，可以通过$(window).bind("hashchange",function（e）{});来进行捕获

可以在文档完全加载前通过设置$.mobile.pushStateEnabled=false来禁用这一特性。

如果不支持ajax的导航模式，或者设置了 rel="external" 或$.mobile.ajaxEnabled=false，则建议禁用这一特性以获得更加连贯的行为。

小知识：

一、Jquery页面加载函数写法：

1）

$(document).ready(function(){

...

})

2)

$(function(){

...

})

二、jquerymobile中这种写法

(function(window, undefined ) {

...// code goes here

})(window)

前一个括号是声明一个函数，后面的括号是调用这个函数并传参。

函数带undefined参数的目的是防止在外部声明了undefined变量导致错误的引用。

三、使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

history.pushState():改变当前页面的URL，将URL放入浏览器历史里

history.replaceStat():将指定的URL替换当前的URL

如何调用

var state = {

title: title,

url: options.url,

otherkey: othervalue

};

window.history.pushState(state,document.title, url);

如何响应浏览器的前进、后退操作

window对象上提供了onpopstate事件，上面传递的state对象会成为event的子对象，这样就可以拿到存储的title和URL了。

window.addEventListener('popstate',function(e){

if (history.state){

var state = e.state;

//do something(state.url, state.title);

}

}, false);

这样就可以结合ajax和pushState完美的进行无刷新浏览了。

jquerymobile页面跳转和参数传递的更多相关文章

  1. Jsp与servlet之间页面跳转及参数传递实例(转)

    原网址:http://blog.csdn.net/ssy_shandong/article/details/9328985 11. jsp与servlet之间页面跳转及参数传递实例 分类: Java ...

  2. JQueryMobile页面跳转参数的传递解决方案

    在JQueryMobile开发手机端应用使用可能需要考虑相关的页面跳转带来的参数问题.因为JQueryMobile其实也是HTML5实践的结果.HTML5中有localStorage和sessionS ...

  3. Android+Jquery Mobile学习系列(4)-页面跳转及参数传递

    关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...

  4. Vue简单项目(页面跳转，参数传递)

    一.页面跳转 1.和上篇文章一样的建文件的步骤 2.建立成功之后,在src文件夹下面添加新的文件夹pages 3.在pages里面添加新的文件Home.Vue和Detail.Vue 4.设Home.V ...

  5. 微信小程序-页面跳转与参数传递

    QQ讨论群:785071190 微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转. navigator标签跳转 <view class=& ...

  6. ionic3 导航的应用（页面跳转与参数传递）

    about.html(跳转页面) <ion-content padding> <ion-list> <ion-item *ngFor="let he of co ...

  7. 微信小程序插件内页面跳转和参数传递（转）

    在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...

  8. 微信小程序插件内页面跳转和参数传递

    在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...

  9. 基于 Storyboard 多种方式的页面跳转、参数传递

    原文 通过按钮关联跳转 选中 Button ,然后点击 action 右边拖拽到 第二个页面 选择 "Show"即可完成跳转关联. 定义页面间 segue Id,通过代码触发跳转 ...

随机推荐

  1. Mysql 基于BinaryLog的复制

    .Mysql Master将更新[Update]和变化[Change]作为事件[events]写入Binary log.Mysql slaves 被配置为读取Binary log from maste ...

  2. Java返回距离当前时间段

    /** * 计算该时间离当前时间的差距 * @param time 格式为:yyyy-MM-dd HH:mm:ss * @return */ public static String getShort ...

  3. 使用detours实现劫持

    第一步:下载detours3.0,安装detours 第二步:构建库文件,nmake编译 第三步:包含库文件和头文件 #include "detours.h" //载入头文件 #p ...

  4. 学习JNDI

    既然datasource对象有tomcat提供,那么我们如何在应用程序中获得它呢,tomcat把这个对象放在JNDI服务中, 并用一个名字把它关联起来,我们在应用程序中,只需通过JNDI搜索这个名字, ...

  5. 谈谈我的编程之路---WAMP(四)

    WAMP的一些配置与使用心得(windows)W-windows,说到windows,其实大家都最熟悉不过了,GUI(graphic user interface)图形界面就没有什么可说的了,基本会用 ...

  6. .net学习笔记---xml操作及读写

    一.XML文件操作中与.Net中对应的类 微软的.NET框架在System.xml命名空间提供了一系列的类用于Dom的实现. 以下给出XML文档的组成部分对应.NET中的类: XML文档组成部分 对应 ...

  7. Visual Studio 推荐插件--高量,变量高量,语法高亮

    1  WordLight for 2008 下载网址:http://visualstudiogallery.msdn.microsoft.com/ad686131-47d4-4c13-ada2-5b1 ...

  8. 【PHP&&mysqli】

    msyqli和mysql只有一个字母的差别,真正的含义是msyql的增强版扩展. MySQL可以处理满足程序员对MySQL数据库操作的各种需要了,为什么还需要mysqli呢?因为mysqli支持面性对 ...

  9. 登录成功，拿到token

    历尽波折,终于成功登录并拿到了token: - (LoginResultDto *)login:(NSString *)userName andPassword:(NSString *)passwor ...

  10. wp8 入门到精通 聊天控件

    <Grid > <Grid x:Name="bubble_right" VerticalAlignment="Center" RenderTr ...