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("pageinit","#home",function(){ 11 $("#p1").on("tap",function(){ 12 $(this).hide(); 13 }); 14 $("#p2").on("taphold",function(){ 15 $(this).hide(); 16 }); 17 $("#p3").on("swipe",function(){ 18 $(this).hide(); 19 }); 20 $("#p4").on("swipeleft",function(){ 21 alert("您向左滑动了超过30px"); 22 }); 23 $("#p5").on("swiperight",function(){ 24 alert("您向右滑动了超过30px"); 25 }); 26 $(document).on("scrollstart",function(){ 27 alert("开始滚动"); 28 }); 29 $(document).on("scrollstop",function(){ 30 alert("滚动结束"); 31 }); 32 $(window).on("orientationchange",function(event){ 33 if(window.orientation == 0){ 34 $("#p6").text("方向已变为portrait").css({"background-color":"yelllow","font-size":"300%"}); 35 } 36 else { 37 $("#p6").text("方向已变为landscape").css({"background-color":"red","font-size":"200%"}); 38 } 39 }); 40 }); 41 </script> 42 </head> 43 44 <body> 45 <div data-role="page" id="home"> 46 <div data-role="header" data-theme="e">header</div> 47 <div data-role="content"> 48 <p id="p1">tap触摸-消失hide</p> 49 <p id="p2">taphold触摸保持1秒-消失hide</p> 50 <p id="p3">swipe水平滑动超过30px-消失hide</p> 51 <p id="p4">swipe水平向左滑动超过30px-alert</p> 52 <p id="p5">swipe水平向右滑动超过30px-alert</p> 53 <p id="p6">请试着旋转您的屏幕,必须用手机查看</p> 54 <p>移动滚动条，会弹出“开始滚动”“滚动结束”窗口。如果未出现滚动条，请缩小浏览器尺寸</p> 55 <p >如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸如果未出现滚动条，请缩小浏览器尺寸出现滚动条，请缩小浏览器尺寸现滚动条，请缩小浏览器尺寸</p> 56 </div> 57 <div data-role="footer" data-theme="b">footer</div> 58 </body> 59 </html>