-
Notifications
You must be signed in to change notification settings - Fork 60
/
demo.jquery.html
67 lines (67 loc) · 1.49 KB
/
demo.jquery.html
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
<html>
<head>
<title>Tocca.js</title>
<style>
#test {
position:absolute;
left:50%;
top:50%;
margin:-200px 0 0 -200px;
width:500px;
height:500px;
color:white;
background:black;
cursor:pointer;
}
dl {
color:gray;
}
</style>
</head>
<body>
<h1>Tocca.js</h1>
<h2>Please check also your console</h2>
<dl id="data">
<dt><strong>Event Name</strong></dt>
<dd id="eventName"></dd>
<dt>Event x</dt>
<dd id="currX"></dd>
<dt>Event y</dt>
<dd id="currY"></dd>
<dt>Swipe Event distance x</dt>
<dd id="distanceX"></dd>
<dt>Swipe Event distance y</dt>
<dd id="distanceY"></dd>
</dl>
<div id="test"></div>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="Tocca.js"></script>
<script>
var eventName = $('#eventName'),
currX = $('#currX'),
currY = $('#currY'),
distanceX = $('#distanceX'),
distanceY = $('#distanceY'),
test = $('#test');
test.on('tap',updateHtml);
test.on('dbltap',updateHtml);
test.on('longtap',updateHtml);
test.on('swipeup',updateHtml);
test.on('swipedown',updateHtml);
test.on('swipeleft',updateHtml);
test.on('swiperight',updateHtml);
test.on('touchmove touchstart touchend',function(e){e.preventDefault();});
function updateHtml (e,data){
console.log(e);
console.log(data);
e.preventDefault();
eventName.text(e.type);
test.text(e.type);
currX.text(data.x);
currY.text(data.y);
distanceX.text(data.distance ? data.distance.x : 'not available');
distanceY.text(data.distance ? data.distance.y : 'not available');
}
</script>
</body>
</html>