<!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. 自动打补丁Bat指令

    自动打补丁 补丁放于hotfix文件夹下 for %%i in (hotfix\*.exe) do start /wait %%i /z /u

  2. Raising Modulo Numbers_快速幂取模算法

    Description People are different. Some secretly read magazines full of interesting girls' pictures, ...

  3. 4、SQL基础整理（规范函数）

    规范函数: 绝对值 select abs(-5) print abs(-5) 表中取绝对值的方法: select code,name,abs(chinese)as yuwen from xueshen ...

  4. cmake在实际复杂项目中的使用

    在实际复杂的项目之中,会有很多的源文件,以及对于库的依赖,如果直接使用makefile会比较的繁琐,而且makefile的推导规则也非常多,对多目录的支持也比较复杂. 最近看了一下cmake,发现配置 ...

  5. VS2010单元测试

    编号:1016时间:2016年5月26日09:35:27功能:VS2010单元测试URL :http://blog.csdn.net/tjvictor/article/details/6175362

  6. MyBatis对应的xml的数据类型

    MyBatis对应的xml的数据类型 JDBC Type Java TypeCHAR StringVARCHAR StringLONGVARCHAR StringNUMERIC java.math.B ...

  7. arduino上使用sprintf()函数输出float值出错

    如果尝试使用sprintf()函数在arduino上进行对float指转换为一个字符串的话,你会发现,it doesn't work.弄了很久,还以为是没学c++的原因.其实在arduino上,这个函 ...

  8. Open vSwitch 给虚拟机网卡限流（QoS）

    这里我们简单描述下如何通过Open vSwitch给虚拟机限流(出流量),同时测试限流效果.测试环境继续复用<整合Open vSwitch与DNSmasq为虚拟机提供DHCP功能>一文中描 ...

  9. 八 JDBC

    一 JDBC 简介 1. 作用:规避数据库的不同,为程序开发人员访问数据库提供统一的编程接口. 2. 具体作用:和数据库建立连接,发送 sql 语句,处理数据库返回的结果集. 3. 框架模式: 4. ...

  10. C. Polycarpus' Dice

    在每个位置讨论一下最大值最小值的取值范围就行 #include<cstdio> #include<iostream> #define maxn 200003 using nam ...