1 <!doctype html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8">

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

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

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

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

 9 <script>

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

11     alert("pagebeforecreate");

12 });

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

14     alert("pagecreate");

15 });

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

17     alert("pageinit");

18 });

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

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

21 });

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

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

24 });

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

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

27 });

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

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

30 });

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

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

33 });

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

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

36 });

37 </script>

38 </head>

39

40 <body>

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

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

43     <div data-role="content">

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

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

46         <p >页面home</p>

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

48     </div>

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

50 </div>

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

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

53     <div data-role="content">

54         <p>page1</p><br>

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

56     </div>

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

58 </div>

59 </body>

60 </html>

jquery_mobile事件的更多相关文章

  1. JNI详解---从不懂到理解

    转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...

  2. jQuery_mobile页面跳转事件学习

      <html>     <head>         <meta http-equiv="Content-Type" content="t ...

  3. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. 关于 Chrome 浏览器中 onresize 事件的 Bug

    我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...

  5. MVVM设计模式和WPF中的实现（四）事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  6. C++中的事件分发

    本文意在展现一个C++实现的通用事件分发系统,能够灵活的处理各种事件.对于事件处理函数的注册,希望既能注册到普通函数,注册到事件处理类,也能注册到任意类的成员函数.这样在游戏客户端的逻辑处理中,可以非 ...

  7. 移动端IOS点击事件失效解决方案

    解决方案 解决办法有 4 种可供选择: 1 将 click 事件直接绑定到目标元素(即 .target)上 2 将目标元素换成 <a> 或者 button 等可点击的元素 3 将 clic ...

  8. Android笔记——Button点击事件几种写法

    Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...

  9. HTML 事件(一) 事件的介绍

    本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...

随机推荐

  1. Node.js 入门：Express + Mongoose 基础使用

    前言 Express 是基于 Node.js 平台的 web 应用开发框架,在学习了 Node.js 的基础知识后,可以使用 Express 框架来搭建一个 web 应用,实现对数据库的增删查改. 数 ...

  2. Java中基本数据类型和包装类

    参考:深入剖析Java中的装箱和拆箱; Java中基本数据类型和包装类互转中 缓冲机制的使用; java学习笔记:装箱和拆箱,包装器和缓冲池 Java 各 类型数据在内存中分配情况详解 一 java内 ...

  3. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  4. ASP.NET Core 快速入门【第二弹-实战篇】

    上篇讲了asp.net core在linux上的环境部署.今天我们将做几个小玩意实战一下.用到的技术和工具有mysql.websocket.AngleSharp(爬虫html解析).nginx多站点部 ...

  5. IDE eclipse PyDev插件安装

    Python安装成功后,即要配置开发环境,这里选用Eclipse, 在Eclipse中安装PyDev插件,有多种方法,这里介绍最最常用的两种. 1)使用Eclipse安装插件,打开eclipse,进入 ...

  6. RMAN数据库恢复测试

    RMAN恢复实践   RMAN> list backup; using target database control file instead of recovery catalog List ...

  7. Orleans---持久化

    Orleans配置---持久化 这是Orleans系列文章中的一篇.首篇文章在此 Grain理想的生命周期应该如下图所示: 这就如美国电影中的大反派一样,死了再复活,死了再复活.当然如果复活的反派没有 ...

  8. HDU 6170----Two strings（DP）

    题目链接 Problem Description Giving two strings and you should judge if they are matched.The first strin ...

  9. apache-DOS

    对DSO的理解还不是特别深刻,所以把自己查来的资料整理一下并想就此作一个总结.暂时先把资料堆到blog里面了,有时间再整理总结.   一.以下源于<Apache HTTP Server Vers ...

  10. 【Centos7】安装mysql5.7.16.tar.gz

    操作系统 centos7.1 云主机 1.下载好了压缩包到windows电脑上 2.使用Smartty的SCP传输到云主机的/home/xxx/下 3.解压 tar xvf  mysql-5.7.16 ...