Hi Hi

'터치 이벤트'에 해당되는 글 1건

  1. jQuery Mobile - 터치 이벤트

jQuery Mobile - 터치 이벤트

 

jQuery Mobile은 사용자의 터치 행위에 따라 다양한 터치 이벤트를 지원한다.

tap - 터치 기반 모바일 기기에서 가능 흔하게 발생하는 이벤트다. 데스크탑 환경의 클릭(Click) 이벤트와 유사하며, 화면을 손가락으로 툭 치면 발생한다.

taphold - 길게 손가락으로 누르고 있으면 발생한다.

swipe - 화면을 손가락으로 밀면 발생하는 이벤트다. 보통 화면을 좌우로 전환할 때 사용한다.

swipeleft - 왼쪽 방향으로 swipe 할 때 발생하는 이벤트다.

swiperight - 오른쪽 방향으로 swipe 할 때 발생하는 이벤트다. 

터치 이벤트를 처리하는 핸들러는 다음과 같이 바인딩 할 수 있다.

  <script type="text/javascript">
   $(function(){
     $("#eventDiv").bind("tap", function(event){...});
     $("#eventDiv").bind("swipe", function(event){...});
   });
 </script>

 

touch.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="euc-kr" />
 <mata name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
 <title> jQuery Mobile</title>
 
 <link rel="shortcut icon" href="./image/icon.png">
 <link rel="apple-touch-icon" href="./image/icon.png">
 
 <link href="./framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" />
 <script src="./framework/jquery-1.6.4.js"></script>
 <script src="./framework/jquery.mobile-1.0.js"></script>
 
 <script type="text/javascript">
  $(function(){
   $("#eventDiv").bind("tap",function(event){
    $("#infoDiv").append(event.tpye+"<br/>");
   });
   $("#eventDiv").bind("taphold",function(event){
    $("#infoDiv").append(event.type+"<br/>");
   });
   $("#eventDiv").bind("swipe",function(event){
    $("#infoDiv").append(event.type+"<br/>");
   });
   $("#eventDiv").bind("swipeleft",function(event){
    $("#infoDiv").append(event.type+"<br/>");
   });
   $("#eventDiv").bind("swiperight",function(event){
    $("#infoDiv").append(event.type+"<br/>");
   });
  });
 </script>
  
</head>

<body>
 <div id="homePage" data-role="page">
  <div data-role="header">
   <h1>Home Page</h1>
  </div>
  <div data-role="content">
   <div id="eventDiv" style="background-color:orange; height:150px"></div>
   <hr/>
   <div id="infoDiv"></div>
  </div>
 </div>

</body>

</html> 

 

 

swipe.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="euc-kr" />
 <mata name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
 <title> jQuery Mobile</title>
 
 <link rel="shortcut icon" href="./image/icon.png">
 <link rel="apple-touch-icon" href="./image/icon.png">
 
 <link href="./framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" />
 <script src="./framework/jquery-1.6.4.js"></script>
 <script src="./framework/jquery.mobile-1.0.js"></script>
 
 <script type="text/javascript">
  $(function(){
   $("#orangeDiv").bind("swipeleft",function(event){
    $.mobile.changePage("#bluePage", {transition:"slide"});
   });
   $("#orangeDiv").bind("swiperight",function(event){
    $.mobile.changePage("#greenPage", {transition:"slide",reverse:true});
   });
   $("#blueDiv").bind("swipeleft", function(event){
    $.mobile.changePage("#greenPage", {transition:"slide"});
   });
   $("#blueDiv").bind("swiperight", function(event){
    $.mobile.changePage("#orangePage", {transition:"slide",reverse:true});
   });
   $("#greenDiv").bind("swipeleft", function(event){
    $.mobile.changePage("#orangePage", {transition:"slide"});
   });
   $("#greenDiv").bind("swiperight", function(event){
    $.mobile.changePage("#orangePage", {transition:"slide", reverse:true});
   });
  });
 
 </script>
</head>

<body>
 <div id="ornagePage" data-role="page">
  <div data-role="header">
   <h1> 오랜지 페이지</h1>
  </div>
  <div id="orangeDiv" data-role="content" style="background-color:orange; height:50px"></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:50px"></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:50px"></div>
 </div>

</body>

</html>