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 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
vue发送ajax请求详解
Oct 09 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 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实现快速排序法函数代码
2012/08/27 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
javascript中检测变量的类型的代码
2010/12/28 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
python写一个md5解密器示例
2018/02/23 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
毕业自荐信
2013/12/16 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
培训班通知
2015/04/25 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python