아래 코드는 간단하게 페이지가 로드됐을때
핸드폰에서 왼쪽으로 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";
});
});