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 事件对象的实现
Jul 13 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
JS实现简单抖动效果
Jun 01 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 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中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
python基础知识小结之集合
2015/11/25 Python
python验证码图片处理(二值化)
2019/11/01 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
如何写出好的Java代码
2014/04/25 面试题
优秀班集体获奖感言
2014/02/03 职场文书
大学班级计划书
2014/04/29 职场文书
早读课迟到检讨书
2014/09/25 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
亮剑观后感600字
2015/06/05 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫