touch.html

<!DOCTYPE HTML>
<html lang="en-US" style="height:100%">
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<style type="text/css">
body{
	margin:0px;
	padding:0px;
	background :#000;
	font-family:'microsoft yahei'
}
.consoleCnt{
	position:absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom:60px;
	overflow:auto;
}
.console{
	position:relative;
	width:33.33%;
	float:left;
	top:0px;
	left:0px;
	padding: 0px 0px 100px;
	overflow: auto;
	line-height:24px;
	text-align:center;
	font-size:13px;
	color:#fff
}
.console3{background:#333;min-height:1000px;}
#toucher{
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	height:60px;
	background:#fff;
}
.checkA,.checkB,.checkC{
	width : 33.33%;
	height : 60px;
	line-height : 60px;
	text-align: center;
	font-size:14px;
	background: #fff;
	float: left
}
.checkC{
	background:#eee 
}
</style>
</head>
<body>
<div class="consoleCnt">
<div class="console console1">
	--logger--<br/>
</div>
<div class="console console3">
	--logger--<br/>
</div>
<div class="console console2">
	--logger--<br/>
</div>
</div>
<div id="toucher">
	<div class="checkA">
		<span>拖动</span>
	</div>
	<div class="checkC">
		全部
	</div>
	<div class="checkB">
		<span>手势</span>
	</div>
</div>
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="asset/toucher.js"></script>

	<script type="text/javascript">
var i = 0;
function I(){
	i++;
	if(i>=100){
		i=1;
	}
	return '-' + i;
}


var bodyTouch = util.toucher($('#toucher')[0]);

bodyTouch.on('singleTap',function(e){
	$('.console3').append('singleTap'+I()+'<br/>');
}).on('doubleTap',function(e){
	$('.console3').append('doubleTap'+I()+'<br/>');
}).on('longTap',function(e){
	$('.console3').append('longTap'+I()+'<br/>');
}).on('swipeStart',function(e){
	$('.console3').append('swipeStart'+I()+'<br/>');
	//console.log(this,e);
}).on('swipe',function(e){
	$('.console3').append('swipe'+I()+'<br/>');
	//console.log(this,e);
}).on('swipeEnd',function(e){
	$('.console3').append('swipeEnd'+I()+'<br/>');
	//console.log(this,e);
}).on('swipeUp',function(e){
	$('.console3').append('swipeUp'+I()+'<br/>');
}).on('swipeRight',function(e){
	$('.console3').append('swipeRight'+I()+'<br/>');
}).on('swipeDown',function(e){
	$('.console3').append('swipeDown'+I()+'<br/>');
}).on('swipeLeft',function(e){
	$('.console3').append('swipeLeft'+I()+'<br/>');
});

bodyTouch.on('swipeStart','.checkA',function(e){
	$('.console1').append('swipeStart<br/>');
	$(this).css({
		'position':'relative',
		'background':'#ddd'
	});
}).on('swipe','.checkA',function(e){
	$('.console1').append('swipe-'+e.pageX +'<br/>');
//	console.log(this,e);
	$(this).css({
		'top':e.moveY,
		'left':e.moveX
	});
	return false;
}).on('swipeEnd','.checkA',function(e){
	$('.console1').append('swipeEnd<br/>');
//	console.log(this,e);
	$(this).animate({
		'position':'static',
		'top':0,
		'left':0,
		'background':'#fff'
	},100);
	$(this).css('background','#fff');
});

bodyTouch.on('singleTap','.checkB',function(e){
	$('.console2').append('singleTap'+I()+'<br/>');
}).on('doubleTap','.checkB',function(e){
	$('.console2').append('doubleTap'+I()+'<br/>');
}).on('longTap','.checkB',function(e){
	$('.console2').append('longTap'+I()+'<br/>');
}).on('swipeUp','.checkB',function(e){
	$('.console2').append('swipeUp'+I()+'<br/>');
}).on('swipeRight','.checkB',function(e){
	$('.console2').append('swipeRight'+I()+'<br/>');
}).on('swipeDown','.checkB',function(e){
	$('.console2').append('swipeDown'+I()+'<br/>');
}).on('swipeLeft','.checkB',function(e){
	$('.console2').append('swipeLeft'+I()+'<br/>');
});


$('.consoleCnt').click(function(){
	$('.console').html('--logger--<br/>');
});
</script>
</body>
</html>