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声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
node中的session的具体使用
Sep 14 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP自定义多进制的方法
2016/11/03 PHP
php实现微信扫码支付
2017/03/26 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
angular.bind使用心得
2015/10/26 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
动态加载css方法实现和深入解析
2017/01/18 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
Python闭包实现计数器的方法
2015/05/05 Python
Python中的自省(反射)详解
2015/06/02 Python
深入理解Python变量与常量
2016/06/02 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
keras中的History对象用法
2020/06/19 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
经济管理专业自荐信
2013/12/30 职场文书
公司股权转让协议书
2014/04/12 职场文书
节约用水倡议书
2014/04/16 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
幼师中班个人总结
2015/02/12 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js