<!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. Android沉浸式(侵入式)标题栏(状态栏)Status（三）

     Android沉浸式(侵入式)标题栏(状态栏)Status(三) 从附录文章1,2可以看到,依靠Android系统提供的标准方案,状态栏即便在透明状态下,仍然有些半透明而不是全透明.本文是And ...

  2. Unity3D ShaderLab Half Lambert光照模型

    Half Lambert光照模型 说到Half Lambert ,就不得不说反恐精英了,在制作反恐精英的过程中,为了防止物体的背面光丢失而显得太过平面化,就用了这个称之为half lambert的技术 ...

  3. PHP 防范IP攻击

    <?php //查询禁止IP $ip =$_SERVER['REMOTE_ADDR']; $fileht=".htaccess2"; if(!file_exists($fil ...

  4. 使用Mysqldump 备份数据库

    使用Mysqldump 备份数据库 1.备份一个数据库 mysqldump --user [user name] --password=[password] [database name] >  ...

  5. Objective-C对象初始化 、 实例方法和参数 、 类方法 、 工厂方法 、 单例模式

    1 重构Point2类 1.1 问题 本案例使用初始化方法重构Point2类,类中有横坐标x.纵坐标y两个属性,并且有一个能显示位置show方法.在主程序中创建两个Point2类的对象,设置其横纵坐标 ...

  6. 【代码分享】简单html5足球射门游戏分享

    之前空余时间想玩玩html5, 于是使用2.2.2的cocos2d-html5 制作了个简单的足球射门游戏 ,美术是自己在纸上画完用手机拍下再ps扣的图,哈哈,赞一下自己的创意. 在我的主页可以玩这个 ...

  7. codeforce Group Photo 2 (online mirror version)

    题目大意: 有n个矩形在地上排成一列,不可重叠,已知他们的宽度w和高度h,现在使至多[n / 2]个矩形旋转90度,问最后可以用多小的矩形恰好覆盖这n个矩形,求满足条件的最小矩形面积. n, w, h ...

  8. sql语句 优化技巧

    1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉 ...

  9. ZOJ 1056 The Worm Turns

    原题链接 题目大意:贪吃蛇的简化版,给出一串操作命令,求蛇的最终状态是死是活. 解法:这条蛇一共20格的长度,所以用一个20个元素的队列表示,队列的每个元素是平面的坐标.每读入一条指令,判断其是否越界 ...

  10. mysql in和or查询效率

    http://blog.chinaunix.net/uid-20639775-id-3416737.html 上面链接博主的文章分析结论: or在没有索引的情况下呈指数增长,in则是正常递增. or的 ...