<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

 <script>

 $(document).on("pagebeforecreate","#home",function(){

     alert("pagebeforecreate");

 });

 $(document).on("pagecreate","#home",function(){

     alert("pagecreate");

 });

 $(document).on("pageinit","#home",function(){

     alert("pageinit");

 });

 $(document).on("pageload",function(event,data){

     alert("触发pageload事件\nURL:"+data.url);

 });

 $(document).on("pageloadfailed",function(event,data){

     alert("触发pageloadfailed事件,页面不存在");

 });

 $(document).on("pagebeforeshow","#page1",function(){

     alert("触发pagebeforeshow事件,page1页面即将显示。\n事件是针对page1页面的事件");

 });

 $(document).on("pageshow","#page1",function(){

     alert("触发pageshow事件，现在显示page1页面。\n事件是针对page1页面的事件");

 });

 $(document).on("pagebeforehide","#page1",function(){

     alert("触发pagebeforehide事件，page1页面即将隐藏。\n事件是针对page1页面的事件");

 });

 $(document).on("pagehide","#page1",function(){

     alert("触发pagehide事件，page1隐藏。\n事件是针对page1页面的事件");

 });

 </script>

 </head>

 <body>

 <div data-role="page" id="home">

     <div data-role="header">header</div>

     <div data-role="content">

         <a href="data-icon.html">存在data-icon.html</a>

         <a href="data-icon2.html">不存在data-icon2.html</a><br/>

         <p >页面home</p>

         <a href="#page1" >跳到page1</a>

     </div>

     <div data-role="footer" data-theme="d">footer</div>

 </div>

 <div data-role="page" id="page1">

     <div data-role="header" >page1</div>

     <div data-role="content">

         <p>page1</p><br>

         <a href="#home">跳到home</a>

     </div>

     <div data-role="footer" >footer</div>

 </div>

 </body>

 </html>

jQuery Mobile_页面事件的更多相关文章

  1. jQuery Mobile 页面事件

    jQuery Mobile 页面事件 在 jQuery Mobile 中与页面打交道的事件被分为四类: Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后 P ...

  2. jQuery Mobile 页面事件总结

    一.页面初始化事件(Page initiallization) 在页面创建前,当页面创建时,以及在页面初始化之后.只在第一次加载时执行. 1. pagebeforecreate 页面创建前 [sour ...

  3. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  4. jquery在页面加载完成后再append的元素事件无效问题

    最近遇到一个问题,jquery在页面加载完成后再append的元素,append元素上有onclick事件,但是在append的元素上怎么点击都不会触发onclick事件.就如: <ul cla ...

  5. jQuery：详解jQuery中的事件（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  6. jQuery：详解jQuery中的事件（一）

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  7. jQuery学习笔记（三）jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  8. ajax的status为201依然触发jquery的error事件的问题

    昨天在调试一个ajax的时候发现,即使status是201,仍然会触发jquery的error事件.statusText是"parseerror". 通过在stackoverflo ...

  9. Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

随机推荐

  1. IOS源码封装成.bundle和.a文件,以及加入xib的具体方法,翻遍网络,仅此一家完美翻译!! IOS7!!(3) 完美结局

    以上翻译有误解之处,现在简单做法如下: 经过深入研究,才感觉明白了内部机制,现在简单介绍于下,主要步骤:xcode5 创建库项目,删掉测试文件和默认创建的类,添加viewController类带xib ...

  2. CodeForces 414D （贪心）

    problem Mashmokh and Water Tanks 题目大意 给你一棵树,k升水,p块钱,进行一次游戏. 在游戏进行前,可以在任意个节点上放置1升水(总数不超过k) 游戏进行若干轮,每轮 ...

  3. 【转】自动化任务运行器 Grunt 迅速上手

    原文转自:http://blog.jobbole.com/51586/ 这篇文章将带领你用Grunt来提速和优化网站开发的流程.首先我们会简短介绍Grunt的功能,然后我们直接上手,介绍如何用Grun ...

  4. 用vs2008打开vs2012项目

    1 使用记事本打开*.sln解决方案文件,将Visual Studio 2012改为Visual Studio 2008 将版本号改为9.00 2 打开扩展名为*.csproj的项目文件,修改为 To ...

  5. centos6.4搭建knowlededgeroot-1.0.4知识库平台

    知识库平台选择 http://www.oschina.net/project/tag/320/pkm 最近接到一个任务,要求搭建一个用于部门内部业务知识规范管理和共享的平台,目的是把部门内的FAQ知识 ...

  6. IDOC、ALE、EDI三者之间的区别于联系

    EDI (Electronic data interchange) - 是指按照同一规定的一套通用标准格式,将标准的经济信息,通过通信网络传输,在贸易伙伴的电子计算机系统之间进行数据交换和自动处理.由 ...

  7. 自己写getElementsByClass()方法

    // 根据类名获取元素 function getElementsByClass(oParent,sClass){ var aResult = []; var aNode = oParent.getEl ...

  8. linux 安装redis

    1:首先命令行下载安装包 wget http://download.redis.io/releases/redis-2.8.13.tar.gz 2:进行解压 tar xzf redis-2.8.13. ...

  9. bootStrap-1

    bootstrap是什么? 1.简单灵活可用于架构流行的用户界面和交互借口的Html.css/javascript工具集. 2.基于html5.css3的bootstrap,具有大量的诱人特性:友好的 ...

  10. Jlink V7在MDK下使用Cortex-M3-Jlink模式开发STM32的说明

    Jlink V7在MDK下使用Cortex-M3-Jlink模式开发STM32的说明   开发环境:STM32F103RB(128K Flash 20K RAM)+MDK3.50+JLINK V7(v ...