jQuery_mobile页面跳转事件学习
2024-10-08 04:50:34
<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，完成显示。
最新文章
- linux下使用fork,exec,waitpid模拟system函数
- 计算机网络(10)-----TCP的拥塞控制
- rowcount和@@Rowcount的区别，获取insert、update、delete影响行数
- js字符转换成整型 parseInt()函数规程Number()函数
- Binding在WPF中的使用
- nginx请求体读取
- HDU 2048 号码塔(DP)
- JUit——（三）JUnit核心对象（测试、测试类、Suit和Runner）
- python基础 --02
- BZOJ_3132_上帝造题的七分钟_树状数组
- ssm框架搭建的基本配置（一站式教会你搭建）
- 前端性能优化成神之路—资源合并与压缩减少HTTP请求
- vue学习【第三篇】：vue之node.js的简单介绍
- 关于Centos7 firewalld防火墙开放端口后仍不能访问ftp和nginx的问题解决
- OA系统权限管理设计方案【转】
- walmart weekly sales
- LIST OF NOSQL DATABASES [currently 150]
- Linux中mkdir和touch命令区别
- SDOI2019Round1游记
- Css权重解析
热门文章
- FFmpeg滤镜实现区域视频增强 及 D3D实现视频播放区的拉大缩小
- FunDA（1）－ Query Result Row：强类型Query结果行
- 多页的TIFF图片在aspx页面分页显示
- JAVA Shallow heap & Retained heap
- Atitti.dw cc 2015 绿色版本安装总结
- Java文件中出现这样的提示错误与解决方法：Cannot return from outside a function or method？
- hadoop-2.7.1伪分布环境搭建
- mysql插入多条数据时间复杂度比较
- log4j:ERROR Failed to rename [/log/xxx.log] to [/log/xxx.log.2016-11-23.log]
- k近邻算法(knn)的c语言实现