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>
