tap
-터치 기반 모바일 기기에서 가장 흔하게 발생하는 이벤트
-데스크탑 환경의 클릭(click)과 유사
taphold
-길게 손가락으로 누르고 있으면 발생하는 이벤트
swipe
-화면을 손가락으로 밀면 발생
-보통 화면을 좌우로 전환 할시 사용함
swipeleft
-왼쪽으로 swipe
swiperight
-오른쪽으로 swipe
<예제>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 화면 인코딩 설정 --> <meta charset="EUC-KR"/> <!-- 화면비율(뷰포트) 설정 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <!-- 바로가기 아이콘 설정 안드로이드, IOS --> <link rel="shortcut icon" href=""/> <link rel="apple-touch-icon" href=""/> <script> <!-- 이벤트 처리 --> $(function(){ $("#orangeDiv").bind("swipeleft", function(){ $.mobile.changePage("#bluePage"); }); $("#orangeDiv").bind("swiperight", function(
){
$.mobile.changePage("#greenPage"); }); $("#blueDiv").bind("swipeleft", function(){ $.mobile.changePage("#greenPage"); }); $("#blueDiv").bind("swiperight", function(){ $.mobile.changePage("#orangePage"); }); $("#greenDiv").bind("swipeleft", function(){ $.mobile.changePage("#orangePage"); }); $("#greenDiv").bind("swiperight", function(){ $.mobile.changePage("#bluePage"); }); }); </script> <title>Insert title here</title> </head> <body> <div id="orangePage" data-role="page"> <div data-role="header"> <h1>오렌지 페이지</h1> </div> <div id="orangeDiv" data-role="content" style="background-color:orange; height:500px"> </div> </div> <div id="bluePage" data-role="page"> <div data-role="header"> <h1>블루 페이지</h1> </div> <div id="blueDiv" data-role="content" style="background-color:blue; height:500px"> </div> </div> <div id="greenPage" data-role="page"> <div data-role="header"> <h1>그린 페이지</h1> </div> <div id="greenDiv" data-role="content" style="background-color:green; height:500px"> </div> </div> </body> </html> |
'IT > JQUERY' 카테고리의 다른 글
| Jquery API 효과 정리 (0) | 2015.06.24 |
|---|---|
| 체크박스 사용시에 많이 쓰이는 소스정리 (0) | 2015.04.14 |
| select box사용시 까먹는 소스 (0) | 2015.04.14 |
| jquery로 div 접었다 폈다 기능 초간단 팁도 아닙니다. ^^ (0) | 2014.10.31 |
| jquery hover 사용법 (0) | 2014.10.20 |