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 按键盘上的enter事件
May 11 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
使用rollup打包JS的方法步骤
Dec 05 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学习之数组值的操作
2011/04/17 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
js读取配置文件自写
2014/02/11 Javascript
JS实现div居中示例
2014/04/17 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
python redis 删除key脚本的实例
2019/02/19 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
前台文员的岗位职责
2013/11/14 职场文书
外贸销售员求职的自我评价
2013/11/23 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
合理化建议书
2015/02/04 职场文书
公司年会主持词范文!
2019/05/07 职场文书
新手初学Java List 接口
2021/07/07 Java/Android