jquery.cj-swipe.js 소개

모바일용 jquery.cj-swipe.js 소개

 모바일용 웹앱 개발할때 많이 쓰는 api 다. 

 이거랑 swipe.js 를 활용하면. 모바일화면과 웹 화면에서 둘다 스와이프가 잘 동작 하는걸 확인 할 수 있다.

데모 소개~  **모바일에선 안되요 PC화면보기로 보세요**

jQuery Mobile Touch Swipe Plugin v1.0

좌측 우측 스와이프 해보세요. 자세한 내용은 http://www.codingjack.com/playground/swipe/ 요기 확인.

ADD AN EVENT BELOW AND SWIPE ME

Events Fired: 0

JavaScript

var element, txt, counter, stats, num = 0;
		
			$(document).ready(function() {
				
				element = $(".box");
				counter = $(".counter").children("span");
				txt = element.children("span");
				stats = $(".event");
				
				$("#links").find("a").click(eventChange);
				$("button").click(clearCounter);
				element.touchSwipe(callback);
				
			});
			
			function clearCounter(event) {
			
				num = 0;
				counter.text("Events Fired: 0");
				
			}
			
			function callback(direction) {
				
				num++;
				txt.stop(true, true).text("Direction = " + direction.toUpperCase()).hide().fadeIn();
				counter.text("Events Fired: " + num);
				
			}
			
			function eventChange(event) {
			
				event.stopPropagation();
				event.preventDefault();
				
				var st = $(this).attr("class");
				
				switch(st) {
					
					case "add-both":
					
// 						element.touchSwipe(callback);
					
					break;
					
					case "add-left":
						
						element.unbindSwipe().touchSwipeLeft(callback);
						
					break;
					
					case "add-right":
						
						element.unbindSwipe().touchSwipeRight(callback);
						
					break;
					
					case "remove-both":
					
						element.unbindSwipe();
					
					break;
					
					case "remove-left":
						
						element.unbindSwipeLeft();
						
					break;
					
					case "remove-right":
					
						element.unbindSwipeRight();
					
					break;
					
				}

CSS

@import url(http://fonts.googleapis.com/css?family=Oxygen);
			
			body {
			
				font: 13px 'Oxygen', Arial, Helvetica, sans-serif;
				color: #222;
				line-height: 18px;
				margin-top: 30px;
				margin-bottom: 60px;
				background: url(bg.png);
				
			}
			
			.container {
			
				margin: 10px 0 0 10px;
				
			}
			
			.box {
			
				width: 100%;
				background-color: #0CF;
				text-align: center;
				padding: 95px 0 95px 0;
				box-sizing: border-box;
				border-bottom: 1px solid #FFF;
				cursor: -moz-grab;
				
			}
			
			.box:active {
			
				cursor: -moz-grabbing;
				
			}
			
			.box span {
			
				font-size: 18px;
				font-weight: bold;
				
				-webkit-user-select: none;
				-moz-user-select: none;
				user-select: none;
				
			}
			
			.divider {
			
				margin: 0 3px 0 3px;
				
			}
			
			h4 {
			
				font-weight: normal;
				font-size: 16px;
				text-shadow: 1px 1px 0 #FFFFFF;
				
			}
			
			h3 {
			
				font-size: 16px;
				margin: 10px 0 5px 0;
				text-shadow: 1px 1px 0 #FFFFFF;
				
			}
			
			h2 {
			
				font-style: italic;
				margin: 20px 0 20px 0;
				text-shadow: 1px 1px 0 #FFFFFF;
				
			}
			
			h2.extra {
			
				margin-top: 30px;
				
			}
			
			button {
			
				margin-left: 5px;
				font-family: 'Oxygen', Arial, Helvetica, sans-serif;
				
			}
			
			.gs {
			
				font-style: italic;
				
			}
			
			hr {
				
				border: none;
				border-top: 1px solid #CCC;
				border-bottom: 1px solid #FFF;
				
			}
			
			.float {
			
				float: left;
				margin-left: 5px;
				
			}
			
			.first {
			
				margin-left: 0;
				
			}
			
			.facebook {
			
				width: 48px;
				height: 21px;
				overflow: hidden;
				
			}
			
			.clear {
			
				clear: both;
				
			}
			
			.code {
			
				display: inline-block;
				
			}
			
			.foot {
				
				margin: 15px 0 15px 10px;
				
			}
			
			p {
			
				margin: 0 0 20px 0;
				
			}
			
			.txt {
			
				margin: 7px 0 12px 0;
				
			}
			
			ul {
			
				padding: 0 0 0 20px;
				
			}
			
			li {
			
				margin-bottom: 8px;
				
			}
			
			.green, .red, .blue {
			
				width: 10px;
				height: 10px;
				display: inline-block;
				margin-left: 10px;
				
			}
			
			.green {
			
				background-color: #090;
				margin-left: 5px;
				
			}
			
			.red {
			
				background-color: #F00;
				
			}
			
			.blue {
			
				background-color: #00F;
				
			}
			
			.b-margin {
			
				margin-left: 5px;
				
			}