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 相关文章推荐
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
js转html实体的方法
Sep 27 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
解决pycharm双击但是无法打开的情况
Oct 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类中private属性继承问题分析
2012/11/01 PHP
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
python 绘制正态曲线的示例
2020/09/24 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
大专生自荐信
2013/10/04 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
董事长秘书职责
2014/01/31 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
会议简报格式范文
2015/07/20 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
Python中re模块的元字符使用小结
2022/04/07 Python