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 相关文章推荐
网上抓的一个特效
May 11 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
Move.js入门
Feb 08 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
如何在Vue.JS中使用图标组件
Aug 04 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP实现验证码校验功能
2017/11/16 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
动态为事件添加js代码示例
2009/02/15 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
django的csrf实现过程详解
2019/07/26 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
详解Python 最短匹配模式
2020/07/29 Python
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
寒假思想汇报
2014/01/10 职场文书
无私奉献演讲稿
2014/09/04 职场文书
会计电算化实训报告
2014/11/04 职场文书
求职自我评价怎么写
2015/03/09 职场文书
导游词书写之黄山
2019/08/06 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang