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 相关文章推荐
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
vue路由插件之vue-route
Jun 13 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 Javascript
vue解决跨域问题(推荐)
Nov 10 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
详解python之协程gevent模块
2018/06/14 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
python中操作文件的模块的方法总结
2021/02/04 Python
python如何修改文件时间属性
2021/02/05 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
大学生职业生涯规划书
2014/03/14 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
华清池导游词
2015/02/02 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
关于Python中*args和**kwargs的深入理解
2021/08/07 Python