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 相关文章推荐
input 输入框内的输入事件详细分析
Mar 17 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
js倒计时简单实现方法
Dec 17 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php 删除cookie方法详解
2014/12/01 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
React组件生命周期详解
2017/07/03 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
Bootstrap table使用方法记录
2017/08/23 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
Python中的面向接口编程示例详解
2021/01/17 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
《散步》教学反思
2014/03/02 职场文书
信仰纪录片观后感
2015/06/08 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
Python中如何处理常见报错
2022/01/18 Python