ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • jquery.cj-swipe.js 소개
    Front-End/jQuery 2014. 10. 2. 15:14
    모바일용 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;
    				
    			}
    


    댓글

COPYRIGHT 2010 EpoNg. ALL RIGHTS RESERVED.