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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
jquery 插件学习(四)
Aug 06 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
JS实现拼图游戏
Jan 29 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
解析thinkphp中的导入文件标签
2013/06/20 PHP
在视频前插入广告
2006/11/20 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
详解Python字符串切片
2019/05/20 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
聚美优品的广告词
2014/03/14 职场文书
房屋公证委托书
2014/04/03 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
如何通过cmd 连接阿里云服务器
2022/04/18 Servers
HttpClient实现表单提交上传文件
2022/08/14 Java/Android
Java Redisson多策略注解限流
2022/09/23 Java/Android