jQuery移动web开发中的页面初始化与加载事件


Posted in Javascript onDecember 03, 2015

页面初始化事件(pagebeforecreate、pagecreate)
Jquery Mobile会自动基于page"内的增强的约定自动初始化一些插件。例如:给一个input输入框约定了type=range属性会自动生成一个自定义滑动条。这些自动初始化的行为是受"page"插件控制的,它在执行前后部署部署事件,允许你在初始化前后操作页面,或者甚至自己提供初始化行为,禁止自动初始化。注以下的页面初始化事件在每个“page”只被触发一次,与每次页面在显示或者隐藏的show/hide事件刚刚相反。

pagebeforecreate:页面初始化时,初始化之前触。

pagecreate:页面初始化时,初始化之后触。

$('#aboutPage').live('pagebeforecreate',function(event){
alert('This page was just inserted into the dom!');
});
$('#aboutPage').live('pagecreate',function(event){
alert('This page was just enhanced by Jquery Mobile!');
});
注意:通过绑定pagebeforecreate然后return false,你禁止页面插件自己的操作。而且,务必在 Jquery Mobile 执行前绑定这些函数,以使 他们在初始化页面加载时被调用。在 mobileinit 事件的处理函数中使用它们既可。

页面加载事件(pagebeforeload、pageload)
当外部的页面加载到dom中时,有两个事件被触发。第一个是 pagebeforeload,第二个是pageload ,或者pageloadfailed。

pagebeforeload

在加载请求发出之前触发,绑定到这个事件的回调函数可以可以对 该事件调用preventDefault(),来表明由他们来处理加载的请求。 这样的做的话回调函数必须对通过数据对象传到回调函数的对象调用resolve()或者reject()。通过第二个参数传到回调函数的对象包含如下的属性:

  • url (字符串):通过回调传到$.mobile.loadPage()的绝对或者相对地址
  • absUrl (字符串):url的绝对地址版本。
  • dataUrl (字符串):绝对地址的当识别页面或者更新浏览器地址的时候使用的绝对地址经过过滤的版本
  • deferred (对象):针对此事件调用preventDefault()的回调函数必须针对此事件调用
  • resolve()或者reject()方法,使得changePage()的请求恢复。

例如:

$( document ).bind( "pagebeforeload", function( event, data ){
 //让jqm框架知道由我们来处理load事件.
 event.preventDefault();
 //...加载文档然后插入到DOM中
 //在这个回调中,或者通过其他的异步加载手段中,
 //调用resolve,转入到下面的参数中,加上一个
 //包含有页面dom元素的jquery选择器。
 data.deferred.resolve( data.absUrl, data.options, page );
});

pageload

在页面已成功加载并插入到DOM后触发。绑定到这个事件的回调函数会被作为一个数据对象作为第二个参数。这个对象包含如下的信息:

  • url(字符串):网址址。
  • absUrl(字符串):url的绝对地址版本。
Javascript 相关文章推荐
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
js实现分页功能
May 24 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 #Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 #Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 #Javascript
详解JavaScript对象和数组
Dec 03 #Javascript
java必学必会之static关键字
Dec 03 #Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 #Javascript
继续学习javascript闭包
Dec 03 #Javascript
You might like
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
jQuery的三种$()
2009/12/30 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
使用EduBlock轻松学习Python编程
2018/10/08 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
Python实现元素等待代码实例
2019/11/11 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
金融专业大学生自我评价
2014/01/09 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
中学生励志演讲稿
2014/04/26 职场文书
教师节标语大全
2014/10/07 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
2019思想汇报范文
2019/05/21 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android