jQuery Mobile 페이지 이동방식(드래그), swipeleft, swiperight

$("#page1").live("swipeleft",function(){

alert("히히히히히");

})

$("#page1").live("swiperight",function(){

alert("히히히히히");

})

$("#page1").live("swipe",function(){

alert("호호호");

});

-------------------------------------------------------------------------------------

http://dotweb.tistory.com/45

아래 코드는 간단하게 페이지가 로드됐을때

핸드폰에서 왼쪽으로 30px(?), 오른쪽으로 30px(?) 이상씩 마우스무브를 하면

페이지 이동을 시키는 코드이다.

해당 페이지에 swipeleft , swiperight 이벤트를 등록시키면

왼쪽으로 마우스슬라이드, 오른쪽으로 마우스슬라이드시에 이벤트가 발생한다.(휴대폰에서도)

페이지 이동방식은 두가지.

일반 웹폼 전송방식

JQM 페이지 전송방식

먼저 일반 웹폽전송방식은 말그대로 기존에 웹페이지에서 폼 전송하듯 하는 방식이고.

JQM 페이지 전송방식은

 $.mobile.changePage("Page1.aspx", { transition: "slide", reverse: false }, true, false); 

이런식으로 전송한다. 

한가지 주의할점은 Page.aspx 페이지에 <data-role="page">로 선언된 부분만 긁어 온다는것.

그러므로 Page1.aspx스크립트구문에 

백날 

$(document).readey(function(){

alert("HHH");

});

이렇게 해도 작동안한다. page로 선언된 부분만 긁어서 

메인페이지부분에 긁어 넣기 때문에.

 $(document).ready(function () { 

        $("#page").live("swipeleft", function () {

            // jqm 방식  $.mobile.changePage("Page1.aspx", { transition: "slide", reverse: false }, true, false); 

// 일반 Form 전송 방식

                location.href = "Page1.aspx";

        });

        $("#page").live("swiperight", function () {

            // $.mobile.changePage("Page1.aspx", { transition: "slide", reverse: false }, true, false); 

                location.href = "Page1.aspx";

        });

    });

• 마이피플
• 트위터
• 페이스북
• 더보기