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 相关文章推荐
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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生出随机字符串
2017/07/06 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
轮播图组件js代码
2016/08/08 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
详解python里的命名规范
2018/07/16 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
python里glob模块知识点总结
2021/01/05 Python
用python批量移动文件
2021/01/14 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
《大自然的语言》教学反思
2014/04/08 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
酒店辞职书范文
2015/02/26 职场文书
2015年科室工作总结
2015/04/10 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
js判断两个数组相等的5种方法
2022/05/06 Javascript