<!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. 了解magento数据库

    网址是:http://www.magereverse.com/,不同版本都有

  2. nginx+fast-cgi+c

    1. 下载fastcgi开发包,编译安装 http://www.fastcgi.com/dist/fcgi-current.tar.gz #wget http://www.fastcgi.com/di ...

  3. PHP startsWith and endsWith

    function startsWith($haystack, $needle) { // search backwards starting from haystack length characte ...

  4. C++学习笔记15：操作符重载的函数原型列表（推荐）

    //普通四则运算 friend A operator +(const A & lhs, const A & rhs); friend A operator -(const A & ...

  5. LeetCode Sum Root to Leaf Numbers（DFS）

    题意: 给一棵二叉树,每个节点上有一个数字,范围是0-9,将从根到叶子的所有数字作为一个串,求所有串的和. 思路: 普通常规的DFS. /** * Definition for a binary tr ...

  6. bold, big, blink

  7. Sonar ＋ Jacoco，强悍的UT, IT 双覆盖率统计(转)

    以前做统计代码测试覆盖,一般用Cobertura.以前统计测试覆盖率,一般只算Unit Test,或者闭上眼睛把Unit Test和Integration Test一起算. 但是,我们已经过了迷信UT ...

  8. Linux之更好的使用Bash

    http://www.awolau.com/linux/start-bash.html#more 接触过Linux的童鞋肯定会知道,在Linux操作系统环境下,命令行操作有时候给我们带来极大的帮助,对 ...

  9. JS中onpropertychange和onchange事件区别小结

    当一个HTML元素的属性用js改变的时候,都能通过onpropertychange来捕获.例如一个文本text对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onproper ...

  10. c# ref关键字对于引用类型传递的影响

    我们可能见到下面的代码 public static void StringBuilderNoRef(StringBuilder s)     { s.Append(" World" ...