Method, Event, Layout API jQuery Mobile API
$.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 });
$.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() });
$.mobile.showPageLoadingMsg 예제 //use theme swatch "b", a custom message, and no spinner $.mobile.showPageLoadingMsg("b", "This is only a test", true);
$.mobile.hidePageLoadingMsg 예제 //hide the page loader $.mobile.hidePageLoadingMsg();
$.mobile.silentScroll //scroll to Y 100px $.mobile.silentScroll(100); 예제 //scroll to Y 100px $.mobile.silentScroll(100);
Event 예제 tap taphold swip swipleft swipright
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}); })
초기화 이벤트 페이지 보이기 숨기기 이벤트 pagebeforecreate pagecreate pagebeforehide 예제 pagebeforecreate pagecreate 페이지 보이기 숨기기 이벤트 pagebeforehide pagebeforeshow pagehide pageshow
방향 전환Event 예제 $(window).bind('orientationchange',function(event){ if (event.orientation == "portrait") { //세로 } else if (event.orientation == "landscape") { //가로 } });
가상 마우스 Event vmouseover == touch vmousedown == touchstart 예제 vmouseover == touch vmousedown == touchstart vmousemove == touchmove vmouseup == touchend vclick == touchend vmousecancel == touchcancel
반응형 Layout Event css 선택자( .portrait, .landscape ) 예제 css 선택자( .portrait, .landscape ) 방향 전환 이벤트(orientationchange)
화면크기 중단점 클래스 예제 320px, 480px, 768px, 1024px 중단점 추가 $.mobile.addResolutionBreakpoints(400);
미디어 쿼리 장치의 특정 상세를 파악하는데 유용 $.mobile.media(“-webkit-min-device-pixel-ratio: 2”);