5. Jquery Mobile 기초 – 터치/방향변경 이벤트처리

(1) tab

화면을 터치하는 것을 tab 이벤트로 인식한다.

$(“#test_div”).bind(“tap”, function()
{
alert(“tab action”);
});

(2) tab hold

화면을 길게 터치하는 것을 tab 이벤트로 인식한다.
$(“#test_div”).bind(“taphold”, function()
{
alert(“taphold action”);
});

(3) swipe

화면을 touch move 하는 이벤트를 말한다.

$(“#test_div”).bind(“swipe”, function()
{
alert(“swipe action”);
});

(4) swipe left/right

화면을 touch 하고 왼쪽으로 move 하는 이벤트를 말한다. 네이버에서 화면이 좌우로 슬라이딩 되는

것을 보았을 것이다. 유사한 내용이라고 보면된다. (같은 방법은 아님)

해당 이벤트를 응용하여 해당 이벤트 시에 transition Slide 로 화면을 전환시켜 주면 유사한 효과를 얻을 수 있다.

$(“#test_div”).bind(“swipeleft”, function(event)
{
console.log(“—-left”);
$.mobile.changePage(“#green”, {transition:”slide”, reverse:true});
});
$(“#test_div”).bind(“swiperight”, function(event)
{
console.log(“—-right”);
$.mobile.changePage(“#green”, {transition:”slide”});
});

<div id=”red” data-role=”page”>
<div data-role=”header”>
<h1>홈 페이지</h1>
</div>

<div data-role=”content”>
<div id =”red_div” style=”width :100%; height:500px; background-color:red”></div>
</div>
</div>

<div id=”green” data-role=”page”>
<div data-role=”header”>
<h1>홈 페이지</h1>
</div>

<div data-role=”content”>
<div id =”green_div” style=”width :100%; height:500px; background-color:green”></div>
</div>
</div>

(4) 화면 전환에 대한 이벤트 처리

모바일 화면은 가로 세로 화면의 비율이 다르다, 이러한 환경에 맞게 화면을 프로그램 해주어야 할때 사용할 수 있는

이벤트 이다.

가) 최초 화면 로딩시 가로/세로 여부 확인

– window.orientation : 기본 HTML의 window.orientation 에서는 0 혹은 90 으로 값을 리턴한다.

if(window.orientation == 0) {
$(“#backImg”).attr(“src”, “../image/big-image-portrait.png”);
} else {
$(“#backImg”).attr(“src”, “../image/big-image-landscape.png”);
}

나) 로딩후 사용자가 가로/세로를 변경하였을 때

– window.orientation : 기본 HTML의 window.orientation 에서는 portrait 혹은 landscape 를 리턴한다.

$(window).bind(“orientationchange”, function(event) {
if(event.orientation == “portrait”) {
$(“#backImg”).attr(“src”, “../image/big-image-portrait.png”);
} else {
$(“#backImg”).attr(“src”, “../image/big-image-landscape.png”);
}