jQuery Mobile_事件

時間 2019-11-16
原文原文鏈接
 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。