【提交内容】：手势的演示

display-server/web/biz/img/plugin/hammer/circle-check.svg

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<g stroke="#2ca02c" stroke-width="2.3" fill="#fff">
<circle cx="10" cy="10" r="8.5"/>
<path d="M5.2,10 8.5,13.4 14.8,7.2"/>
</g>
</svg>

display-server/web/biz/js/plugin/gestures.js

@@ -1,16 +0,0 @@
require(["domReady!","mobile","jcl","hammer"],function(doc, Mobile, $, Hammer) {
	
	$("#PanAndSwipe").tap(function(){
		Mobile.openPage("PanAndSwipe");
	});
	$("#TapAndPress").tap(function(){
		Mobile.openPage("TapAndPress");
	});
	$("#PinchAndRotate").tap(function(){
		Mobile.openPage("PinchAndRotate");
	});
	$("#Nested").tap(function(){
		Mobile.openPage("Nested");
	});
	
});

display-server/web/biz/js/plugin/hammer.js

@@ -0,0 +1,112 @@
require([ "domReady!", "mobile", "hammer", "jquery", "util" ], function(doc, Mobile, Hammer, jQuery) {
	new iScroll("content");
	
	// rotate
	var rotateHam = new Hammer($(".rotate")[0], {
		domEvents : true
	});
	var liveScale = 1;
	var currentRotation = 0;
	rotateHam.get('rotate').set({
		enable : true
	});
	jQuery(".rotate").on("rotate",function(e) {
		var rotation = currentRotation + Math.round(liveScale* e.originalEvent.gesture.rotation);
		$(this).find("img").css("transform", "rotate( " + rotation + "deg)");
		console.log("rotation = " + rotation);
	});
	jQuery(".rotate").on("rotateend", function(e) {
		currentRotation += Math.round(e.originalEvent.gesture.rotation);
	});
	// pinch
    var pinchHam = new Hammer($(".pinch")[0], {
    	domEvents : true
	});
	var width = 1900;
	var height = 400;
	var left = 950;
	var top = 220;
	pinchHam.get('pinch').set({
		enable : true
	});
	jQuery(".pinch").on("pinch", function(e) {
		if (width * e.originalEvent.gesture.scale >= 300) {
			jQuery(this).find("img").css({
				width : width * e.originalEvent.gesture.scale,
				"margin-left" : -left * e.originalEvent.gesture.scale,
				height : height * e.originalEvent.gesture.scale,
				"margin-top" : -top * e.originalEvent.gesture.scale
			});
		}
		console.log(e.originalEvent.gesture.scale);
	});
	jQuery(".pinch").on("pinchend", function(e) {
		width = width * e.originalEvent.gesture.scale;
		height = height * e.originalEvent.gesture.scale;
		left = left * e.originalEvent.gesture.scale;
		top = top * e.originalEvent.gesture.scale;
		console.log(width);
	});
	
	// press
	new Hammer($( ".press")[0], {
      domEvents: true
    });
    $(".press").on("press", function(e) {
       $(".demo-overlay").toggle();
    });
    
    // pan
	var panImg, panMargin;
	new Hammer($(".pan")[0], {
		domEvents : true
	});
	jQuery(".pan").on("panstart", function(e) {
		panImg = $(".pan img");
		panMargin = parseInt(panImg.css("margin-left"), 10);
	});
	jQuery(".pan").on("pan", function(e) {
		console.log("pan");
		var delta = panMargin + e.originalEvent.gesture.deltaX;
		console.log(delta);
		if (delta >= -1750 && delta <= -150) {
			panImg.css({"margin-left" : panMargin + e.originalEvent.gesture.deltaX});
		}
	});
    
    // tap
	new Hammer($(".tap")[0], {
		domEvents : true
	});
	var tapCurrent = 0;
	var tapImgs = $(".demo-box.tap img");
	$(".tap").on("tap", function(e) {
		if (tapImgs[tapCurrent + 1]) {
			tapCurrent++;
		} else {
			tapCurrent = 0;
		}
		tapImgs.removeClass("active");
		tapImgs.eq(tapCurrent).addClass("active");
	});
	
	// swipe
	new Hammer($(".swipe")[0], {
		domEvents : true
	});
	var swipeCurrent = 0;
	var swipeImgs = $(".demo-box.swipe img");
	$(".swipe").on("swipeleft", function(e) {
		if (swipeImgs[swipeCurrent + 1]) {
			swipeImgs.removeClass("active");
			swipeImgs.eq(++swipeCurrent).addClass("active");
		}
	});
	$(".swipe").on("swiperight", function(e) {
		if (swipeImgs[swipeCurrent - 1]) {
			swipeImgs.removeClass("active");
			swipeImgs.eq(--swipeCurrent).addClass("active");
		}
	});
});

display-server/web/biz/js/plugin/panAndSwipe.js

@@ -1,33 +0,0 @@
require(["domReady!","mobile","jcl","hammer"],function(doc, Mobile, $, Hammer) {
	
	// 创建一个实例
	// 默认指识别水平方向的移动
//	var mc = new Hammer(document.getElementById("panElement"));
	var mc = new Hammer.Manager(document.getElementById("myElement"));
	
	var pan = new Hammer.Pan();
	var swipe = new Hammer.Swipe();
	
	mc.add([pan, swipe, new Hammer.Tap()]);
	// 让手势支持各个方向。
	// 这将阻止触控设备的垂直滚动在元素
	mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
	mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
	
	// 使互不影响 //recognizeWith requireFailure
//	pan.requireFailure(swipe);
	swipe.recognizeWith(pan);
	
	mc.on("panleft panright panup pandown", function(ev){
//		$("#panElement").append(ev.type + " gesture detected.");
		console.log("pan======"+ev.type);
	});
	
	mc.on("swipeleft swiperight swipeup swipedown", function(ev){
//		$("#panElement").append("==="+ev.type + " gesture detected.");
		console.log("swipe*********"+ev.type);
	});
	
});

display-server/web/res/css/base.css

@@ -25,7 +25,7 @@ input,
textarea { border-radius:0; vertical-align:top;}
img { vertical-align:top;}
a { text-decoration:none;}
.fn-hide {display: none;}
/*motherboard*/
@@ -601,6 +601,8 @@ input[type="checkbox"]:checked { opacity:1; }
.c_tab>.title-tall li { height:0.65rem;}
.c_tab>.pages .page { position:relative;}
.c_tab>.pages { -webkit-transition:left 0.4s ease-out; -webkit-transform-style:preserve-3d; position:relative; left:0; overflow:hidden;}
.c_tab>.pages-6 { width:600%;}
.c_tab>.pages-6 > div { float:left; width:16.6%;}
.c_tab>.pages-5 { width:500%;}
.c_tab>.pages-5 > div { float:left; width:20%;}
.c_tab>.pages-4 { width:400%;}

display-server/web/res/js/require-config.js

@@ -14,7 +14,6 @@ require.config({
		'zepto' : 'base/zepto',
		'iScroll' : 'base/iscroll',
		'iScroll5' : 'base/iscroll5',
		'hammer' : 'base/hammer',
		'o' : 'frame/o',
		//'oEvent' : 'frame/o-event',
		'oInput' : 'frame/o-input',
@@ -46,7 +45,8 @@ require.config({
		'wmDialog2' : 'ui/wm-dialog2',
		'wmDropmenu' : 'ui/wm-dropmenu',
		'wmRefresh' : 'ui/wm-refresh',
		'handlebars' : 'base/handlebars/handlebars'
		'handlebars' : 'base/handlebars/handlebars',
		'hammer' : 'base/hammer/hammer'
		
	},
	deps: [],

display-server/web/template/webapp/PluginIndex.html

@@ -59,7 +59,7 @@
		<div class="pic"><span class="e_ico-nfc"></span></div>
		<div class="text">NFC</div>
	</li>
	<li action="Gestures">
	<li action="Hammer">
		<div class="pic"><span class="e_ico-nfc"></span></div>
		<div class="text">手势</div>
	</li>

display-server/web/template/webapp/plugin/Gestures.html

@@ -1,47 +0,0 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>手势</title> {%>template/common/Head.html%}
<link href="biz/css/project.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="biz/js/plugin/gestures.js"></script>
</head>
<style type="text/css">
</style>
<body>
	<div class="c_navBar">
		<div class="left">
			<div class="back">
				<span class="e_ico-back"></span> <span class="text">手势</span>
			</div>
		</div>
	</div>
	<div class="m_content m_content-nofooter" id="content"
		style="position: absolute; top: 0.7rem; bottom: 0rem; left: 0; right: 0;">
		<div>
			<div class="c_submit" id="consoleMenu">
				<ul>
					<li><button class="e_button-ok" ontap id="PanAndSwipe">PanAndSwipe实例</button></li>
				</ul>
				<br>
				<ul>
					<li><button class="e_button-ok" ontap id="TapAndPress">TapAndPress实例</button></li>
				</ul>
				<br>
				<ul>
					<li><button class="e_button-ok" ontap id="PinchAndRotate">PinchAndRotate实例</button></li>
				</ul>
				<br>
				<ul>
					<li><button class="e_button-ok" ontap id="Nested">Nested嵌套实例</button></li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

display-server/web/template/webapp/plugin/Hammer.html

@@ -0,0 +1,196 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>Hammer</title>
{%>template/common/Head.html%}
<script type="text/javascript" src="biz/js/plugin/hammer.js"></script>
</head>
<style type="text/css">
.hammer-wrap {
	text-align: center;
	margin-top: 0.22rem;
}
.hammer-wrap .hammer-icon {
	width: 1rem;
}
.hammer-wrap h1 {
	margin-top: 0.22rem;
}
.hammer-wrap h2 {
	font-weight: normal;
    line-height: 1.4;
    margin: 0.22rem;
}
.demo-box-wrap {
  border: 1px solid #333;
  /* font-family: sans-serif; */
  background: #333;
  text-align: center;
  color: white;
  width: 302px;
  height: 255px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3em;
}
.demo-box-wrap .demo-box {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.demo-box-wrap .demo-box > img {
  height: 400px;
  width: 1900px;
  position: absolute;
  margin-left: -950px;
  display: none;
  pointer-events: none;
  margin-top: -220px;
  left: 50%;
  top: 50%;
  max-width: none;
}
.demo-box-wrap h2 {
  pointer-events: none;
  color: white;
}
.demo-box-wrap .demo-box img.active {
  display: block;
}
.demo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(70, 70, 70, 0.8);
    display: none;
}
.demo-overlay img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
}
</style>
<body>
<div class="c_navBar">
	<div class="left">
		<div class="back">
			<span class="e_ico-back"></span><span class="text">手势</span>
		</div>
	</div>
</div>
<div class="m_content" id="content">
<div>
	<div class="hammer-wrap">
		<img src="biz/img/plugin/hammer/tap.png" class="hammer-icon">
		<h1>Try it!</h1>
		<h2>你可以尝试单点图片，实现图片的切换</h2>
		<div class="row">
			<div class="column large-4 medium-6 small-12">
				<div class="demo-box-wrap">
					<h2>单点</h2>
					<div class="demo-box tap" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
						<img class="active" src="biz/img/plugin/hammer/pano-1.jpg">
						<img src="biz/img/plugin/hammer/pano-2.jpg">
						<img src="biz/img/plugin/hammer/pano-3.jpg">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hammer-wrap">
		<img src="biz/img/plugin/hammer/press.png" class="hammer-icon">
		<h1>Try it!</h1>
		<h2>您可以尝试按住图片，选中图片/取消选中</h2>
		<div class="row">
			<div class="column large-4 medium-6 small-12">
				<div class="demo-box-wrap">
				  	<h2>按住</h2>
					<div class="demo-box press" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
						<img class="active" src="biz/img/plugin/hammer/pano-1.jpg">
					 	<div class="demo-overlay">
							<img src="biz/img/plugin/hammer/circle-check.svg">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hammer-wrap">
		<img src="biz/img/plugin/hammer/pan.png" class="hammer-icon">
		<h1>Try it!</h1>
		<h2>您可以尝试平移图片，查看图片更多</h2>
		<div class="row">
			<div class="column large-4 medium-6 small-12">
				<div class="demo-box-wrap">
					<h2>平移</h2>
					<div class="demo-box pan" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
						<img class="active" src="biz/img/plugin/hammer/pano-1.jpg">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hammer-wrap">
		<img src="biz/img/plugin/hammer/swipe.png" class="hammer-icon">
		<h1>Try it!</h1>
		<h2>您可以尝试左右滑动，实现图片的切换</h2>
		<div class="row">
			<div class="column large-4 medium-6 small-12">
				<div class="demo-box-wrap">
					<h2>滑动</h2>
					<div class="demo-box swipe" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
						<img class="active" src="biz/img/plugin/hammer/pano-1.jpg">
						<img src="biz/img/plugin/hammer/pano-2.jpg">
						<img src="biz/img/plugin/hammer/pano-3.jpg">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hammer-wrap">
		<img src="biz/img/plugin/hammer/rotate.png" class="hammer-icon">
		<h1>Try it!</h1>
		<h2>您可以尝试旋转，实现图片的旋转</h2>
		<div class="row">
			<div class="column large-4 medium-6 small-12">
				<div class="demo-box-wrap">
					<h2>旋转</h2>
					<div class="demo-box rotate" style="touch-action: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
						<img class="active" src="biz/img/plugin/hammer/pano-1.jpg" style="transform: rotate(-2deg);">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hammer-wrap">
				<img src="biz/img/plugin/hammer/pinch.png" class="hammer-icon">
				<h1>Try it!</h1>
				<h2>您可以尝试捏放，实现图片的放大/缩小</h2>
				<div class="row">
					<div class="column large-4 medium-6 small-12">
						<div class="demo-box-wrap">
							<h2>捏放</h2>
							<div class="demo-box pinch" style="touch-action: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
								<img class="active" src="biz/img/plugin/hammer/pano-1.jpg" style="width: 2269.85px; margin-left: -1134.93px; height: 477.864px; margin-top: -262.825px;">
							</div>
						</div>
					</div>
				</div>
			</div>
</div>
</div>
</div>
</body>
</html>

display-server/web/template/webapp/plugin/Nested.html

@@ -1,220 +0,0 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <meta name="msapplication-tap-highlight" content="no"/>
    <link rel="stylesheet" href="biz/css/assets/style.css">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>嵌套pan</title> 
{%>template/common/Head.html%}
<link href="biz/css/project.css" rel="stylesheet" type="text/css" />
<!-- <script type="text/javascript" src="biz/js/plugin/gesture.js"></script> -->
<style>
        .container {
            max-width: 900px;
            margin: 0 auto;
        }
        .panes.wrapper {
            max-height: 400px;
            max-width: 800px;
            background: #666;
            margin: 40px auto;
        }
        .panes {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        .pane {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            font: bold 60px/250px 'Open Sans', Helvetica, Arial, sans-serif;
            color: #fff;
        }
        .panes.animate > .pane {
            transition: all .3s;
            -webkit-transition: all .3s;
        }
    </style>
</head>
<body>
    <div class="panes wrapper">
        <div class="pane bg1">
            <div class="panes">
                <div class="pane" style="background: rgba(0,0,0,0);">1.1</div>
                <div class="pane" style="background: rgba(0,0,0,.2);">1.2</div>
                <div class="pane" style="background: rgba(0,0,0,.4);">1.3</div>
                <div class="pane" style="background: rgba(0,0,0,.6);">1.4</div>
                <div class="pane" style="background: rgba(0,0,0,.8);">1.5</div>
            </div>
        </div>
        <div class="pane bg2">
            <div class="panes">
                <div class="pane" style="background: rgba(0,0,0,0);">2.1</div>
                <div class="pane" style="background: rgba(0,0,0,.2);">2.2</div>
                <div class="pane" style="background: rgba(0,0,0,.4);">2.3</div>
                <div class="pane" style="background: rgba(0,0,0,.6);">2.4</div>
                <div class="pane" style="background: rgba(0,0,0,.8);">2.5</div>
            </div>
        </div>
        <div class="pane bg3">
            <div class="panes">
                <div class="pane" style="background: rgba(0,0,0,0);">3.1</div>
                <div class="pane" style="background: rgba(0,0,0,.2);">3.2</div>
                <div class="pane" style="background: rgba(0,0,0,.4);">3.3</div>
                <div class="pane" style="background: rgba(0,0,0,.6);">3.4</div>
                <div class="pane" style="background: rgba(0,0,0,.8);">3.5</div>
            </div>
        </div>
        <div class="pane bg4">
            <div class="panes">
                <div class="pane" style="background: rgba(0,0,0,0);">4.1</div>
                <div class="pane" style="background: rgba(0,0,0,.2);">4.2</div>
                <div class="pane" style="background: rgba(0,0,0,.4);">4.3</div>
                <div class="pane" style="background: rgba(0,0,0,.6);">4.4</div>
                <div class="pane" style="background: rgba(0,0,0,.8);">4.5</div>
            </div>
        </div>
        <div class="pane bg5">
            <div class="panes">
                <div class="pane" style="background: rgba(0,0,0,0);">5.1</div>
                <div class="pane" style="background: rgba(0,0,0,.2);">5.2</div>
                <div class="pane" style="background: rgba(0,0,0,.4);">5.3</div>
                <div class="pane" style="background: rgba(0,0,0,.6);">5.4</div>
                <div class="pane" style="background: rgba(0,0,0,.8);">5.5</div>
            </div>
        </div>
    </div>
    <div class="container">
        <h1>Nested Pan recognizers</h1>
        <p>Nested recognizers are possible with some threshold and with use of <code>requireFailure()</code>.</p>
    </div>
    <script src="res/js/base/hammer.js"></script>
    <script>
        var reqAnimationFrame = (function() {
            return window[Hammer.prefixed(window, "requestAnimationFrame")] || function(callback) {
                setTimeout(callback, 1000 / 60);
            }
        })();
        function dirProp(direction, hProp, vProp) {
            return (direction & Hammer.DIRECTION_HORIZONTAL) ? hProp : vProp
        }
        /**
         * Carousel
         * @param container
         * @param direction
         * @constructor
         */
        function HammerCarousel(container, direction) {
            this.container = container;
            this.direction = direction;
            this.panes = Array.prototype.slice.call(this.container.children, 0);
            this.containerSize = this.container[dirProp(direction, 'offsetWidth', 'offsetHeight')];
            this.currentIndex = 0;
            this.hammer = new Hammer.Manager(this.container);
            this.hammer.add(new Hammer.Pan({ direction: this.direction, threshold: 10 }));
            this.hammer.on("panstart panmove panend pancancel", Hammer.bindFn(this.onPan, this));
            this.show(this.currentIndex);
        }
        HammerCarousel.prototype = {
            /**
             * show a pane
             * @param {Number} showIndex
             * @param {Number} [percent] percentage visible
             * @param {Boolean} [animate]
             */
            show: function(showIndex, percent, animate){
                showIndex = Math.max(0, Math.min(showIndex, this.panes.length - 1));
                percent = percent || 0;
                var className = this.container.className;
                if(animate) {
                    if(className.indexOf('animate') === -1) {
                        this.container.className += ' animate';
                    }
                } else {
                    if(className.indexOf('animate') !== -1) {
                        this.container.className = className.replace('animate', '').trim();
                    }
                }
                var paneIndex, pos, translate;
                for (paneIndex = 0; paneIndex < this.panes.length; paneIndex++) {
                    pos = (this.containerSize / 100) * (((paneIndex - showIndex) * 100) + percent);
                    if(this.direction & Hammer.DIRECTION_HORIZONTAL) {
                        translate = 'translate3d(' + pos + 'px, 0, 0)';
                    } else {
                        translate = 'translate3d(0, ' + pos + 'px, 0)'
                    }
                     this.panes[paneIndex].style.transform = translate;
                     this.panes[paneIndex].style.mozTransform = translate;
                     this.panes[paneIndex].style.webkitTransform = translate;
                }
                this.currentIndex = showIndex;
            },
            /**
             * handle pan
             * @param {Object} ev
             */
            onPan : function (ev) {
                var delta = dirProp(this.direction, ev.deltaX, ev.deltaY);
                var percent = (100 / this.containerSize) * delta;
                var animate = false;
                if (ev.type == 'panend' || ev.type == 'pancancel') {
                    if (Math.abs(percent) > 20 && ev.type == 'panend') {
                        this.currentIndex += (percent < 0) ? 1 : -1;
                    }
                    percent = 0;
                    animate = true;
                }
                this.show(this.currentIndex, percent, animate);
            }
        };
        // the horizontal pane scroller
        var outer = new HammerCarousel(document.querySelector(".panes.wrapper"), Hammer.DIRECTION_HORIZONTAL);
        // each pane should contain a vertical pane scroller
        Hammer.each(document.querySelectorAll(".pane .panes"), function(container) {
            // setup the inner scroller
            var inner = new HammerCarousel(container, Hammer.DIRECTION_VERTICAL);
            // only recognize the inner pan when the outer is failing.
            // they both have a threshold of some px
            outer.hammer.get('pan').requireFailure(inner.hammer.get('pan'));
        });
    </script>
</body>
</html>

display-server/web/template/webapp/plugin/PanAndSwipe.html

@@ -1,35 +0,0 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>手势</title> {%>template/common/Head.html%}
<link href="biz/css/project.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="biz/js/plugin/panAndSwipe.js"></script>
</head>
<style type="text/css">
#myElement {
	background: silver;
	height: 300px;
	text-align: center;
	font: 30px/300px Helvetica, Arial, sans-serif;
}
</style>
<body>
	<div class="c_navBar">
		<div class="left">
			<div class="back">
				<span class="e_ico-back"></span> <span class="text">手势</span>
			</div>
		</div>
	</div>
	<div class="m_content m_content-nofooter" id="content">
		<div class="title">pan举例</div>
		<div id="myElement"></div>
	</div>
</body>
</html>

display-server/web/template/webapp/plugin/PinchAndRotate.html

@@ -1,44 +0,0 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>PinchAndRotate</title> {%>template/common/Head.html%}
<link href="biz/css/project.css" rel="stylesheet" type="text/css" />
<script src="res/js/base/hammer.js"></script>
</head>
<style type="text/css">
#myElement {
  background: silver;
  height: 300px;
  text-align: center;
  font: 30px/300px Helvetica, Arial, sans-serif;
}
</style>
<body>
	<div id="myElement"></div>
<script>
	var myElement = document.getElementById('myElement');
	var mc = new Hammer.Manager(myElement);
	// create a pinch and rotate recognizer
	// these require 2 pointers
	var pinch = new Hammer.Pinch();
	var rotate = new Hammer.Rotate();
	// we want to detect both the same time
	pinch.recognizeWith(rotate);
	// add to the Manager
	mc.add([pinch, rotate]);
	mc.on("pinch rotate", function(ev) {
	    myElement.textContent += ev.type +" ";
	});
</script>
</body>
</html>

display-server/web/template/webapp/plugin/TapAndPress.html

@@ -1,45 +0,0 @@
<!DOCTYPE HTML>
<html class="s_bs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>TapAndPress</title> {%>template/common/Head.html%}
<link href="biz/css/project.css" rel="stylesheet" type="text/css" />
<script src="res/js/base/hammer.js"></script>
</head>
<style type="text/css">
#myElement {
  background: silver;
  height: 300px;
  text-align: center;
  font: 30px/300px Helvetica, Arial, sans-serif;
}
</style>
<body>
	<div id="myElement"></div>
<script>
	var myElement = document.getElementById('myElement');
	
	//We create a manager object, which is the same as Hammer(), but without the presetted recognizers. 
	var hammer = new Hammer.Manager(myElement);
	var singleTap = new Hammer.Tap({event:'singletap'});
	var doubleTap = new Hammer.Tap({event:'doubletap', taps:2 });
	var tripleTap = new Hammer.Tap({event:'tripletap', taps:3 });
	hammer.add([tripleTap, doubleTap, singleTap, new Hammer.Press()]);
	
	// 使互不影响
	tripleTap.recognizeWith([doubleTap, singleTap]);
	doubleTap.recognizeWith(singleTap);
	doubleTap.requireFailure(tripleTap);
	singleTap.requireFailure([tripleTap, doubleTap]);
	
	hammer.on("singletap doubletap tripletap press", function(ev) {
	    myElement.textContent += ev.type +" ";
	});
</script>
</body>
</html>