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 相关文章推荐
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
JS实现轮播图效果
Jan 11 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中的integer类型使用分析
2010/07/27 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python监控键盘输入实例代码
2018/02/09 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Tensorflow累加的实现案例
2020/02/05 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
数控专业大学生的自我鉴定
2013/11/13 职场文书
培训主管的岗位职责
2013/11/23 职场文书
保险专业自荐信范文
2014/02/20 职场文书
2014年手术室工作总结
2014/11/26 职场文书
工人先进事迹材料
2014/12/26 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python