Method, Event, Layout API

Presentation on theme: "Method, Event, Layout API"— Presentation transcript:

1 Method, Event, Layout API
jQuery Mobile API

2 $.mobile.changePage 예제 //transition to the "confirm" page with a "pop" transition without tracking it in history $.mobile.changePage( "../alerts/confirm.html",{ transition: "pop", reverse: false, changeHash: false });

3 $.mobile.loadPage //load a "search results" page, using data from a form with an ID of "search" $.mobile.loadPage( "searchresults.php", { type: "post", data: $("form#search").serialize() });

4 $.mobile.showPageLoadingMsg
예제 //use theme swatch "b", a custom message, and no spinner $.mobile.showPageLoadingMsg("b", "This is only a test", true);

5 $.mobile.hidePageLoadingMsg
예제 //hide the page loader $.mobile.hidePageLoadingMsg();

6 $.mobile.silentScroll //scroll to Y 100px $.mobile.silentScroll(100);
예제 //scroll to Y 100px $.mobile.silentScroll(100);

7 Event 예제 tap taphold swip swipleft swipright

8 swipe 이벤트 페이지 전환 예제 $(":jqmData(role='page')").live("swipeleft",function(){ //현재 페이지의 id에서 페이지 번호를 알아낸 다음 1을 더합니다. var nextPage = parseInt($(this).attr("id").split("page")[1])+1; if(nextPage===4) nextPage=1; //페이지를 전환합니다. $.mobile.changePage("#page"+nextPage,"slide"); }); $(":jqmData(role='page')").live("swiperight",function(){ //현재 페이지의 id에서 페이지 번호를 알아낸 다음 1을 뺍니다. var nextPage = parseInt($(this).attr("id").split("page")[1])-1; if(nextPage===0)nextPage=3; $.mobile.changePage("#page"+nextPage,{transition:"slide",reverse:true}); })

9 초기화 이벤트 페이지 보이기 숨기기 이벤트 pagebeforecreate pagecreate pagebeforehide
예제 pagebeforecreate pagecreate 페이지 보이기 숨기기 이벤트 pagebeforehide pagebeforeshow pagehide pageshow

10 방향 전환Event 예제 $(window).bind('orientationchange',function(event){ if (event.orientation == "portrait") { //세로 } else if (event.orientation == "landscape") { //가로 } });

11 가상 마우스 Event vmouseover == touch vmousedown == touchstart
예제 vmouseover == touch vmousedown == touchstart vmousemove == touchmove vmouseup == touchend vclick == touchend vmousecancel == touchcancel

12 반응형 Layout Event css 선택자( .portrait, .landscape )
예제 css 선택자( .portrait, .landscape ) 방향 전환 이벤트(orientationchange)

13 화면크기 중단점 클래스 예제 320px, 480px, 768px, 1024px 중단점 추가 $.mobile.addResolutionBreakpoints(400);

14 미디어 쿼리 장치의 특정 상세를 파악하는데 유용
$.mobile.media(“-webkit-min-device-pixel-ratio: 2”);