jQuery移动web开发中的页面初始化与加载事件

页面初始化事件(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的绝对地址版本。
赞 (0)

相关推荐

  • jQuery的初始化与对象构建之浅析

    小结一下: 1.整个类库定义在一匿名函数中,杜绝了全局变量的产生: 2.将undefined 作为缺失的参数传递,防止了undefined 变量的污染: 3.可以看出$(...) 实际上返回的是jQuery.fn.init 对象的实例,随后将该对象的prototype 指向了jQuery.prototype (语句jQuery.fn.init.prototype = jQuery.fn),因此产生的实例共享着jQuery.prototype 里的方法和属性且实现了链式编程的操作: 4.最后通过w

  • jQuery页面加载初始化的3种方法(推荐)

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(function(){ alert("第一种方法."); }); 第二种: $(function(){ alert("第二种方法."); });  第三种: jQuery(function($) { alert("第三种方法."); }); ps; 不用jQuer

  • jquery跟js初始化加载的多种方法及区别介绍

    jquery和js初始化加载页面的区别: jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. 1.jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本, 第一种(比较常用): 复制代码 代码如下: $.function(){ alert("第一种方法"); }); 第二种: 复制代码 代码如下: $(document).ready(function(){ alert("第二种方法"

  • jQuery对象初始化的传参方式

    jQuery对象初始化的传参方式包括: 1.$(DOMElement) 2.$('<h1>...</h1>'), $('#id'), $('.class') 传入字符串, 这是最常见的形式, 这种传参数经常也传入第二个参数context指定上下文,其中context参数可以为$(...), DOMElement 3.$(function() {}); <===> $(document).ready(function() { }); 4.$({selector : '.c

  • 浅谈jquery页面初始化的4种方式

    <script src="Scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(document).ready(function () { alert("第一种方法."); }); $(function () { alert("第二种方法."); }); jQuery(function ($) { a

  • jQuery页面加载初始化常用的三种方法

    jQuery页面加载初始化常用的三种方法

    当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javascript" src="./js/jquery-1.7.min.js"></script> 复制代码 代码如下: <script type="text/javascript">

  • 浅析jQuery Mobile的初始化事件

    jQuery Mobile 包括一个初始化事件,该事件甚至会先于 jQuery 的 document.ready 事件进行加载.jQuery Mobile 实际上在文档对象本身上触发其初始化事件,第一个触发的事件是mobileinit. 当Jquery Mobile开始执行时,他就会在document对象上触发mobileinit 事件,因为mobileinit事件是在加载后马上触发,所以你需要在Jquery Mobile加载之前绑定你的事件处理函数,所以我建议你如下安排你的js引用顺序 <sc

  • jQuery移动web开发中的页面初始化与加载事件

    页面初始化事件(pagebeforecreate.pagecreate) Jquery Mobile会自动基于page"内的增强的约定自动初始化一些插件.例如:给一个input输入框约定了type=range属性会自动生成一个自定义滑动条.这些自动初始化的行为是受"page"插件控制的,它在执行前后部署部署事件,允许你在初始化前后操作页面,或者甚至自己提供初始化行为,禁止自动初始化.注以下的页面初始化事件在每个"page"只被触发一次,与每次页面在显示或者

  • Scratch3.0 页面初始化同时加载sb3文件的操作代码

    scratch是一种非常合适的培养自己的编程兴趣的方式.通过拖拽的方式,可以实现一些游戏,小程序的开发,就像搭积木一样,下面给大家介绍Scratch3.0 页面初始化同时加载sb3文件的操作方法,一起看看吧! 目标文件地址:src\containers\sb-file-uploader.jsx 修改 sb-file-uploader.jsx文件, class SBFileUploader中添加componentDidMount(),代码如下 componentDidMount() { var _

  • web.xml中servlet, bean, filter, listenr 加载顺序_动力节点Java学院整理

    web.xml 文件中一般包括 servlet, spring, filter, listenr的配置.那么他们是按照一个什么顺序加载呢?加载顺序会影响对spring bean 的调用. 比如filter需要用到 bean ,但是加载顺序是 先加载filter 后加载spring,则filter中初始化操作中的bean为null:首先可以肯定 加载顺序与他们在web.xml 文件中的先后顺序无关. web.xml 中 listener 和 serverlet 的加载顺序为 先 listener

  • web.xml中如何设置配置文件的加载路径实例详解

    web.xml中如何设置配置文件的加载路径实例详解 web应用程序通过Tomcat等容器启动时,会首先加载web.xml文件,通常我们工程中的各种配置文件,如日志.数据库.spring的文件等都在此时被加载,下面是两种常用的配置文件加载路径,即配置文件可以放到 SRC目录下或者可以放到WEB-INF根目录下 第一种在web.xml中这样配置: <context-param> <param-name >contextConfigLocation </param-name >

  • react开发中如何使用require.ensure加载es6风格的组件

    其实用的babel,在浏览器端就应该可以加载,之前少了个default: require.ensure([],(require) => { let A = require('./a.js').default; }) 以下方式也可以,但是比较low,可以作废了: 1.问题提出:想通过require.ensure加载es6风格的模块? 2.出现问题:import方式本身就是静态设计方式.如果require进来的是commonjs模块或者amd则没问题,但项目只想es6一个书写风格,行吗? 遗憾的是:

  • Django Web开发中django-debug-toolbar的配置以及使用

    Django Web开发中django-debug-toolbar的配置以及使用

    前言 django,web开发中,用django-debug-toolbar来调试请求的接口,无疑是完美至极. 可能本人,见识博浅,才说完美至极, 大神,表喷,抱拳了. django_debug_toolbar 是django的第三方工具包,给django扩展了调试功能. 包括查看执行的sql语句,db查询次数,request,headers,调试概览等. django-debug-toolbar的配置方法如下 第一步: pip install django-debug-toolbar 安装完成

  • Web 开发中Ajax的Session 超时处理方法

    在 Java Web 开发中,当session超时的情况下,普通页面的跳转好处理.关于Ajax的请求超时处理,就需要特殊处理下了. 先写一个统一的过滤器,或者拦截器,针对Ajax请求进行过滤处理,下面示例以Filter为例: public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServ

  • Web开发中客户端的跳转与服务器端的跳转的区别

    客户端的跳转:跳转之后地址栏的信息是会变的,变为跳转之后的地址信息 例如:response.sendRedirect(); 服务器端的跳转:跳转之后的地址栏的信息不会发生任何的改变 例如:<jsp:forword> request.getRequestDisPather("").forword(request, response); (1).而且在使用request属性范围时,只有服务器端跳转才能将request范围的属性保存到跳转页面:而如果是客户端的跳转,则无法进行re

  • php开发中的页面跳转方法总结

    页面跳转可能是由于用户单击链接.按钮等触发的,也可能是系统自动产生的.页面自动跳转在WEB开发中经常用到,而且根据需求可以采用不同的跳转方式,比如提示操作信息后延时跳转等, 本文总结了WEB开发中常见的几种页面跳转方法. PHP header()函数跳转 PHP的header()函数非常强大,其中在页面url跳转方面也调用简单,使用header()直接跳转到指定url页面,这时页面跳转是302重定向: $url = "http://www.jb51.net/"; header( &qu

  • web开发中如何优雅的解决"重复请求"问题

    web开发中如何优雅的解决"重复请求"问题

    目录 前言 提出问题 解决思路 axios 如何取消请求 封装axios 准备工作 开始封装 总结 前言 在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内容: 需要取消重复请求的场景 我们如何取消重复请求 axios如何取消重复的请求 封装axios 如何给开源的项目提供源码 如何在本地调试npm包 提出问题 最近做的项目中,用的用户经常遇到这样的问题: 用户频繁切换筛选条件去请求数据,初次

随机推荐