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入门教程(7) History历史对象
Jan 31 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
简单的三步vuex入门
May 20 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
微信小程序工具函数封装
Oct 28 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的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
jQuery中width()方法用法实例
2014/12/24 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python selenium如何设置等待时间
2016/09/15 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
python 字典的打印实现
2019/09/26 Python
Python autoescape标签用法解析
2020/01/17 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
十佳教师事迹材料
2014/01/11 职场文书
大学生毕业鉴定
2014/01/31 职场文书
保密工作实施方案
2014/02/24 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
单位实习介绍信
2015/05/05 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android