모바일웹 슬라이드 ( SWIPE ) | Client Side

이제 시시한 롤링은 지겹다!

 

다음이나 네이버 메인에 보면 손가락으로 휙휙 저으면 바뀌기...

 

일명 swipe !!

 

jqueryMobile 로 아주 간단하게 구현가능합니다.

 

아래 두개의 js파일 불러오고.. 첫번째꺼는 jquery 두번째는 jqueryMobile js 파일

http://code.jquery.com/jquery-1.6.1.min.js

http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js

그리고 아래코드 보면 끝!

$(document).ready(init);
   
   var nSwipeCount = 0;
   var nSwipeLeftCount = 0;
   var nSwipeRightCount = 0;
   
   function init()
   {
    $("#content").bind("swipe", function (event)
    {
     $("#txtSwipe").text("swipe " + ++nSwipeCount);
    });
    
    $("#content").bind("swipeleft", function (event)
    {
     $("#txtSwipeLeft").text("swipeleft " + ++nSwipeLeftCount);
    });
    
    $("#content").bind("swiperight", function (event)
    {
     $("#txtSwipeRight").text("swiperight " + ++nSwipeRightCount);
    });
   }

swipe 0

swipeleft 0

swiperight 0

 

소스를 보면 bind를 이용해서

처리하죠?

보면 그냥 알듯..설명하고 자시고 할것도 없네.

워낙에 군더더기 없이 깔끔해서리..ㅋ

여기에 이제 조금만 응용하면 여러가지

손가락을 움직였을시 여러가지 효과를 줄수가 있겠지요?ㅋ

해보니 슬라이딩도 아주 멋드러지게 잘되네요..^^ㅋ

 

swipe
Comment Write
Comment List
가람 2013.05.24 09:30              
완전 감사합니다. 응용해봐야겠네요 ^^
사용자 2012.01.19 16:23              
와.. 꼭 필요했었는데.. 감사합니다.^^