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 相关文章推荐
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
原生js实现随机点名
Jul 05 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python获取本机外网ip的方法
2015/04/15 Python
详解python中的json的基本使用方法
2016/12/21 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
2014年学校后勤工作总结
2014/12/06 职场文书
员工工作能力评语
2014/12/31 职场文书
展览会邀请函
2015/02/02 职场文书
责任书范本大全
2015/05/11 职场文书
安全教育片观后感
2015/06/17 职场文书
汽车车尾标语大全
2015/08/11 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js