<!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("pageinit","#home",function(){

     $("#p1").on("tap",function(){

         $(this).hide();

     });

     $("#p2").on("taphold",function(){

         $(this).hide();

     });

     $("#p3").on("swipe",function(){

         $(this).hide();

     });

     $("#p4").on("swipeleft",function(){

         alert("您向左滑动了超过30px");

     });

     $("#p5").on("swiperight",function(){

         alert("您向右滑动了超过30px");

     });

     $(document).on("scrollstart",function(){

         alert("开始滚动");

     });

     $(document).on("scrollstop",function(){

         alert("滚动结束");

     });

     $(window).on("orientationchange",function(event){

         if(window.orientation == 0){

             $("#p6").text("方向已变为portrait").css({"background-color":"yelllow","font-size":"300%"});

         }

         else {

             $("#p6").text("方向已变为landscape").css({"background-color":"red","font-size":"200%"});

         }

     });

 });

 </script>

 </head>

 <body>

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

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

     <div data-role="content">

         <p id="p1">tap触摸-消失hide</p>

         <p id="p2">taphold触摸保持1秒-消失hide</p>

         <p id="p3">swipe水平滑动超过30px-消失hide</p>

         <p id="p4">swipe水平向左滑动超过30px-alert</p>

         <p id="p5">swipe水平向右滑动超过30px-alert</p>

         <p id="p6">请试着旋转您的屏幕,必须用手机查看</p>

         <p>移动滚动条，会弹出“开始滚动”“滚动结束”窗口。如果未出现滚动条，请缩小浏览器尺寸</p>

         <p >如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸出现滚动条，请缩小浏览器尺寸现滚动条，请缩小浏览器尺寸</p>

     </div>

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

 </body>

 </html>

jQuery Mobile_事件的更多相关文章

  1. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  2. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  3. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  4. jquery的事件命名空间详解

    jquery现在的事件API:on,off,trigger支持带命名空间的事件,当事件有了命名空间,就可以有效地管理同一事件的不同监听器,在定义组件的时候,能够避免同一元素应用到不同组件时,同一事件类 ...

  5. jquery css事件编程 尺寸设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jquery css事件编程 位置 操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 不写完不让回家的JQuery的事件与动画

    在这看不见太阳的小黑屋里,苦逼的一天又开始了 好了闲话我也就不扯了,接下来我就来说说我对jQuery事件和动画的理解吧!!! 还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们 ...

  8. jQuery scroll事件实现监控滚动条分页示例（转）

    这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...

  9. jquery双击事件

    <html> <head><meta http-equiv="Content-Type" content="text/html; chars ...

随机推荐

  1. Cocos2d-x 2.x项目创建

    cocos2d-x下载地址:http://www.cocos2d-x.org/download 2.0之后的创建项目 1. cd cocos2d-x-2.2.1/tools/project-creat ...

  2. Postfix之telnet测试

    1.# 2. 3.#若没安装telnet 需安装telnet 4.yum install telnet 5. 6.#telnet测试smtp连接postfix 7.telnet 127.0.0.1 2 ...

  3. Qt Charts示例

    Qt 5.7 有一些变化,把原来商业版的几个模块用GPLv3协议放到了社区版本里: Qt Charts (GPLv3) Qt Data Visualization (GPLv3) Qt Virtual ...

  4. 14、C#基础整理（函数）

    函数 1.概念:是一个带有输入参数.输出参数.返回值的代码块. 2.写法: 修饰符  返回值类型  函数名(输入参数,输入参数) { 方法段 return 返回值; } 3.注释: (1)输入参数格式 ...

  5. ios layoutsubView 何时被调用

    -layoutSubviews方法:这个方法,在UIView中默认没有做任何事情,需要子类进行重写.UIView是一个纯净的视图,里面没有任何子控件,所以不会做什么事情.一般系统自带控件中有子控件的都 ...

  6. yii 隐藏index.php

    首先,开启apache的rewrite模块 去掉rewrite前的#,如下所示 LoadModule rewrite_module modules/mod_rewrite.so 接着,在yii的ind ...

  7. BS模式的模型结构详解

    编号:1004时间:2016年4月12日16:59:17功能:BS模式的模型结构详解 URL:http://blog.csdn.net/icerock2000/article/details/4000 ...

  8. JAVA 打印指定月份日历

    package learnExercise; import java.util.Scanner; public class PrintCalender { /** * @param args */ p ...

  9. PCV 学习笔记-ch1 主成分分析实现

    模块名称:pca.py PCA原理与紧致技巧原理待补... #-*-coding:UTF-8-*- ''' Created on 2015年3月2日 @author: Ayumi Phoenix ch ...

  10. TCP三次握手连接与四次握手断开

    http://blog.csdn.net/whuslei/article/details/6667471(三次握手与四次握手) 1. TCP的三次握手最主要是防止已过期的连接再次传到被连接的主机. 如 ...