jquery.swipe/index.html at master · fdjean/jquery.swipe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

        <title>swipe test</title>


        <script src="jquery-1.4.4.min.js" type="application/javascript" charset="utf-8"></script>
        <script src="jquery.swipe.js" type="application/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				font: 10px Arial, sans-serif;
				margin: 0;
			}
			#zone-test {
				position: absolute;
			    height: 100%;
				width: 100%;

				background: #cccc00;
			}


		</style>
        <script type="text/javascript">
         $(document).ready(function() {

         	$("#zone-test").swipe(
            function(e, data){

                console.log('type:'+data.type+' deltaX:'+data.deltaX+' deltaY:'+data.deltaY+' distance:'+
                    data.distance+' delay:'+data.delay+' direction:'+data.direction  );

                    switch (data.type){

                    case ('direction'):
                       $("#zone-test").append('direction '+data.direction+'<br />');
                    break;
                    case ('doubletap'):
                       $("#zone-test").append('doubletap <br />');
                    break;
                    case ('longtap'):
                       $("#zone-test").append('longtap <br />');
                    break;
                    case ('simpletap'):
                       $("#zone-test").append('simpletap <br />');
                    break;

                    }


            }, {

                swipeCapture: true,
                longTapCapture: true,
                doubleTapCapture: true,
                simpleTapCapture: true

            }
            );


         });


        </script>
    </head>
    <body>

        <div id="zone-test">
         Swipe example : touch screen ... <br />


        </div>
    </body>
</html>