mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
102 lines
3.6 KiB
HTML
102 lines
3.6 KiB
HTML
<html ng-app="gestureTest">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Nav Bars</title>
|
|
|
|
<!-- Sets initial viewport load and disables zooming -->
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
|
<script src="../../../../dist/js/ionic.js"></script>
|
|
<script src="../../../../dist/js/angular/angular.js"></script>
|
|
<script src="../../../../dist/js/angular/angular-animate.js"></script>
|
|
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
|
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
|
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
|
<script src="../../../../dist/js/ionic-angular.js"></script>
|
|
<style>
|
|
#box {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(255, 100, 100, 0.5);
|
|
overflow: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body ng-controller="AppCtrl">
|
|
|
|
<div id="box" class="box">
|
|
<span id="output"></span>
|
|
</div>
|
|
|
|
<script>
|
|
angular.module('gestureTest', ['ionic', 'ngAnimate'])
|
|
|
|
.controller('AppCtrl', function($scope, $compile, $element) {
|
|
})
|
|
|
|
.directive('box', function(Gesture) {
|
|
return {
|
|
restrict: 'C',
|
|
link: function($scope, $element, $attr) {
|
|
var output = angular.element(document.getElementById('output'));
|
|
|
|
// Debug output function
|
|
var o = function(type, d) {
|
|
var p = ['<div>' + type + ' event: '];
|
|
for(var i = 0; i < d.length; i++) {
|
|
p.push(d[i]);
|
|
}
|
|
p.push('</div>');
|
|
output.append(p.join(', '));
|
|
$element[0].scrollTop = $element[0].scrollHeight;
|
|
};
|
|
|
|
var tapFn = function(e) {
|
|
o('tap', [e.gesture.touches[0].pageX, e.gesture.touches[0].pageY]);
|
|
};
|
|
var tapGesture = Gesture.on('tap', tapFn, $element);
|
|
|
|
var releaseFn = function(e) {
|
|
o('release', [e.gesture.touches[0].pageX, e.gesture.touches[0].pageY]);
|
|
};
|
|
var releaseGesture = Gesture.on('release', releaseFn, $element);
|
|
|
|
var holdFn = function(e) {
|
|
o('hold', [e.gesture.touches[0].pageX, e.gesture.touches[0].pageY]);
|
|
};
|
|
var holdGesture = Gesture.on('hold', holdFn, $element);
|
|
|
|
var dragFn = function(e) {
|
|
o('drag', [e.gesture.touches[0].pageX, e.gesture.touches[0].pageY, e.gesture.deltaX, e.gesture.deltaY]);
|
|
};
|
|
var dragGesture = Gesture.on('drag', dragFn, $element);
|
|
|
|
var swipeFn = function(e) {
|
|
o('swipe', [e.gesture.touches[0].pageX, e.gesture.touches[0].pageY, e.gesture.direction]);
|
|
};
|
|
var swipeGesture = Gesture.on('swipe', swipeFn, $element);
|
|
|
|
var transformFn = function(e) {
|
|
o('transform', [e.gesture.touches[0].pageX, e.gesture.touches[0].pageY, e.gesture.direction]);
|
|
};
|
|
var transformGesture = Gesture.on('transform', transformFn, $element);
|
|
|
|
$scope.$on('$destroy', function () {
|
|
Gesture.off(dragGesture, 'drag', dragFn);
|
|
Gesture.off(holdGesture, 'hold', holdFn);
|
|
Gesture.off(releaseGesture, 'release', releaseFn);
|
|
Gesture.off(swipeGesture, 'swipe', swipeFn);
|
|
Gesture.off(tapGesture, 'tap', tapFn);
|
|
Gesture.off(transformGesture, 'transform', transformFn);
|
|
});
|
|
}
|
|
};
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|