jQuery_mobile页面跳转事件学习
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
console && console.log($(this).attr('id') + "-document ready执行");
});
$(document).on('pagecreate', '[data-role="page"]', function(){
console && console.log($(this).attr('id') + " - pagecreate!!");
});
$(document).on('pagebeforecreate', '[data-role="page"]', function(){
console && console.log($(this).attr('id') + " - pagebeforecreate!!")；
});
$(document).on('pagebeforeshow ', '[data-role="page"]', function(){
console && console.log($(this).attr('id') + "-pagebeforeshow执行");
});
$(document).on('pageshow', '[data-role="page"]', function(){
console && console.log($(this).attr('id') + "-pageshow执行");
});
$(document).on('pageinit', '[data-role="page"]', function(){
console && console.log($(this).attr('id') + "-pageinit执行");
});
$(document).on("pagebeforechange", function(e, data){
console && console.log($(this).attr('id') + "-pagebeforechange!!");
});
$(document).on('pagechange', function(e, data){
console && console.log($(this).attr('id') + "-pagechange!!");
});
$(document).on('pagebeforehide', '[data-role="page"]', function(){
console && console.log($(this).attr('id') + " - pagebeforehide!!");
});
$(document).on('pageremove', '[data-role="page"]', function(){
console && console.log($(this).attr('id') + " - pageremove!!");
});
$(document).on('pagehide', '[data-role="page"]', function(){
console && console.log($(this).attr('id') + " - pagehide!!");
});
$(document).on('pagebeforeload', '[data-role="page"]',function(){
console && console.log($(this).attr('id')+"-pagebeforeload!!");
});
$(document).on('pageload', '[data-role="page"]',function(){
console && console.log($(this).attr('id')+"-pageload!!");
});
</script>
</head>
<body>
<!--页面一-->
<div data-role="page" id="pageone" data-theme="e">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<p>
content
</p>
<a href="#pagetwo" data-role="button">pageone-button</a>
</div>
<div data-role="footer">
<h1>footer</h1>
</div>
</div>
<!--//页面二-->
<div data-role="page" id="pagetwo" data-theme="d">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<p>
content
</p>
<a href="#pagethree" data-role="button" data-rel="dialog">pagetwo-button</a>
</div>
<div data-role="footer">
<h1>footer</h1>
</div>
</div>
<!--//页面三-->
<div data-role="page" id="pagethree" data-overlay-theme="e">
<div data-role="header" data-theme="b">
<h1>header</h1>
</div>
<div data-role="content" data-theme="a">
<p>
data-overlay-theme 属性规定对话框出现在其上的页面的背景色。
</p>
<a href="#pageone">转到pageone</a>
</div>
<div data-role="footer" data-theme="c">
<h1>footer</h1>
</div>
</body>
</html>“页面一”初次加载的顺序：
控制台打印：
undefined-pagebeforechange!!
pageone - pagebeforecreate!!
pageone - pagecreate!!
pageone-pageinit执行
pageone-pagebeforeshow执行
pageone-pageshow执行
undefined-pagechange!!
undefined-document ready执行从页面一调到页二的执行顺序：
控制台打印结果：
undefined-pagebeforechange!!
pagetwo - pagebeforecreate!!
pagetwo - pagecreate!!
pagetwo-pageinit执行
undefined-pagebeforechange!!
pageone - pagebeforehide!!
pagetwo-pagebeforeshow执行
pageone - pagehide!!
pagetwo-pageshow执行
undefined-pagechange!!从页面二调到页面三（是一个dialog）的执行顺序：
控制台打印结果：
undefined-pagebeforechange!!
undefined-pagebeforechange!!
pagetwo - pagebeforehide!!
pagetwo - pagehide!!
undefined-pagechange!!从页面三回到页面一的执行顺序：
控制台打印结果：
undefined-pagebeforechange!!
undefined-pagebeforechange!!
pageone-pagebeforeshow执行
pageone-pageshow执行
undefined-pagechange!!再次从页面一到页面二的执行顺序：
控制台信息：
undefined-pagebeforechange!!
undefined-pagebeforechange!!
pageone - pagebeforehide!!
pagetwo-pagebeforeshow执行
pageone - pagehide!!
pagetwo-pageshow执行
undefined-pagechange!!再次从页面二到页面三的顺序：
控制台信息：
undefined-pagebeforechange!!
undefined-pagebeforechange!!
46pagetwo - pagebeforehide!!
54pagetwo - pagehide!!
41undefined-pagechange!!再次从页面三回到页面一的顺序：
控制台信息：
undefined-pagebeforechange!!
undefined-pagebeforechange!!
pageone-pagebeforeshow执行
pageone-pageshow执行
undefined-pagechange!!总结：
每个页面第一次加载的时候会调用：pagebeforecreate , pagecreate , pageinit方法对其完成创建和初始化；
在三个方法只调用一次，下次跳转显示的时候因为页面已经创建了，所以只会调用pagebeforeshow，pageshow，完成显示。
jQuery_mobile页面跳转事件学习的更多相关文章
- uni-app开发经验分享六：页面跳转及提示框
在我们开发的uni-app的过程中,页面跳转及提示框往往是我们做数据交互及结果反馈所要使用的功能,这里分享下我收集的一些方法及看法. 一:页面跳转 事件跳转 :指通过tap等事件来实现页面的跳转,跳转 ...
- android 学习第一天 了解事件机制，页面跳转等常用操作
点击时间2种 第一种,通过初始化页面 写入点击事件 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedI ...
- iOS-UITableView-处理cell上按钮事件(弹出警示框,页面跳转等)
一. 目的: 实现UITableViewCell上按钮点击事件可以进行页面跳转. 二. 实现方法: 1. 用协议的方式的实现. 2. 需要自定义UITableViewCell. 三. 代码部分. ce ...
- Android实现页面跳转、ListView及其事件
Android实现页面跳转.ListView及其事件 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 工程内容 进入主页面后,使用ListView实现特 ...
- Android+Jquery Mobile学习系列(4)-页面跳转及参数传递
关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...
- 微信小程序开发：学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
- JavaWeb学习——页面跳转方式
JavaWeb学习——页面跳转方式 摘要:本文主要学习了请求转发和响应重定向,以及两者之间的区别. 请求转发 相关方法 使用HttpServletRequest对象的 getRequestDispat ...
- Silverlight学习笔记之页面跳转
在进行项目开发的时候,经常遇到页面之间的跳转,包括silverlight之间以及silverlight和html之间的跳转. silverlight之间的页面跳转包含两点: 1.主窗体和子窗体 用户新 ...
- [ExtJS5学习笔记]第二十五节 利用window.open()函数实现ExtJS5的登陆页面跳转
本文地址:http://blog.csdn.net/sushengmiyan/article/details/40427543 mvvm方式实现登陆的博客:http://blog.csdn.net/s ...
随机推荐
- ArcGIS属性选择器筛选
以前我也会过,后来忘得干干净净.还是老话,学习新东西不难,难的是不断总结和提升.重新学习ArcGIS的属性筛选功能,记录如下. 要求: 1. 查找,删除. 例:根据属性当中相同字段,选择符合要求的数据 ...
- 1.JAVA基础复习——计算机基础与环境变量配置
软件开发的了解 软件开发: 软件:一系列按照特定组织的计算机数据和指令的集合. 开发:制作软件. 程序:一系列有序指令的集合. 人机交互 人机交互的方式有两种:图形化界面和命令行方式. 图形化界面:简 ...
- Java三大框架之——Hibernate中的三种数据持久状态和缓存机制
Hibernate中的三种状态 瞬时状态:刚创建的对象还没有被Session持久化.缓存中不存在这个对象的数据并且数据库中没有这个对象对应的数据为瞬时状态这个时候是没有OID. 持久状态:对象经过 ...
- jdk源码分析PriorityQueue
一.结构 PriorityQueue是一个堆,任意节点都是以它为根节点的子树中的最小节点 堆的逻辑结构是完全二叉树状的,存储结构是用数组去存储的,随机访问性好.最小堆的根元素是最小的,最大堆的根元素是 ...
- 理解Java对象的交互：时钟显示程序
实现: 结构: 对象:时钟 - 对象:小时 - 对象:分钟 小时和分钟具有相同属性(值,上限),可以用一个类Display来定义这两个对象: 但是两者之间又具有联系( ...
- 利用Java动态生成 PDF 文档
利用Java动态生成 PDF 文档,则需要开源的API.首先我们先想象需求,在企业应用中,客户会提出一些复杂的需求,比如会针对具体的业务,构建比较典型的具备文档性质的内容,一般会导出PDF进行存档.那 ...
- 炫酷的jQuery对话框插gDialog
js有alert,prompt和confirm对话框,不过不是很美体验也不是很好,用jQuery也能实现, 体验效果:http://hovertree.com/texiao/jquery/34/ 代码 ...
- SAP CRM 使用Javascript触发SAP Server Event
原文地址:How To Trigger SAP Server Event With Javascript 本文地址:http://www.cnblogs.com/hhelibeb/p/5977921. ...
- 关于addSubView需要注意的事项 －今天吃了一个大亏
addSubview: Adds a view to the end of the receiver’s list of subviews. 译:增加一个视图到接收者的子视图列表中. - (void) ...
- 看看C# 6.0中那些语法糖都干了些什么（上篇）
今天没事,就下了个vs2015 preview,前段时间园子里面也在热炒这些新的语法糖,这里我们就来看看到底都会生成些什么样的IL? 一:自动初始化属性 确实这个比之前的版本简化了一下,不过你肯定很好 ...