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实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
实例解析Array和String方法
Dec 14 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 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
关于手调机和数调机的选择
2021/03/02 无线电
php计算十二星座的函数代码
2012/08/21 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
python合并多个excel文件的示例
2020/09/23 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
家长寄语大全
2014/04/02 职场文书
出生公证委托书
2014/04/03 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
实习单位意见
2015/06/04 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
Mysql事务索引知识汇总
2022/03/17 MySQL
Win11查看设备管理器
2022/04/19 数码科技
MySQL 字符集 character
2022/05/04 MySQL