Method, Event, Layout 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);

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  pagebeforeshow  pagehide  pageshow

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

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

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

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

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

4. jQuery Mobile 설정  When jQuery Mobile starts, it triggers a mobileinit event on the document object.  몇가지 설정 옵션을 바꿔서 모든 페이지의 동작방 식을 변경  $(window).bind(‘mobileinit', function() { //apply overrides here });

ns string, default: ""  커스텀데이터 속성에 적용할 네임스페이스.ui-mobile [data-mynamespace-role=page],.ui-mobile [data-mynamespace-role=dialog],

autoInitializePage boolean, default: true  When the DOM is ready, the framework should automatically call $.mobile.initializePage.  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { initializePage : “false” });

subPageUrlKey string, default: "ui-page"  서브페이지를 참조할 때 URL 에 쓸 문자열  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { subPageUrlKey : “ #page1” });

activePageClass string, default: "ui-page-active"  현재 보이는 페이지에 적용될 CSS 스타일  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { activePageClass : “screen” });

activeBtnClass string, default: "ui-btn-active"  활성화된 상태의 버튼에 적용될 CSS 스타일  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { activePageClass : “button” });

ajaxEnabled boolean, default: true  비동기적 기능인 Ajax 폼처리, Ajax 링크처리, URL 해시관리를 켜거나 끔  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { ajaxEnabled : “false” });

linkBindingEnabled boolean, default: true  비동기적 기능인 Ajax 폼처리, Ajax 링크처리, URL 해시관리를 켜거나 끔  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { linkBindingEnabled : “false” });

hashListeningEnabled boolean, default: true  해시관리를 켜거나 끔  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { linkBindingEnabled : “false” });

pushStateEnabled boolean, default: true  Enhancement to use history.replaceState in supported browsers, to convert the hash-based Ajax URL into the full document path.  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { linkBindingEnabled : “false” });

defaultDialogTransition string, default: 'pop'  Set the default transition for page changes that use Ajax  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { linkBindingEnabled : “none” });

defaultPageTransition string, default: 'fade'  Set the default transition for page changes that use Ajax  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { linkBindingEnabled : “slide” });

touchOverflowEnabled boolean, default: false  Enable smoother page transitions and true fixed toolbars in devices that support both the overflow  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { linkBindingEnabled : “slide” });

minScrollBack string, default: 250  Minimum scroll distance that will be remembered when returning to a page.  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { linkBindingEnabled : “slide” });

loadingMessage string, default: "loading"  Set the text that appears when a page is loading. If set to false, the message will not appear at all.  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { linkBindingEnabled : “slide” });

pageLoadErrorMessage string, default: "Error Loading Page"  Set the text that appears when a page fails to load through Ajax.  $(window).bind(‘mobileinit', function() { $.extend( $.mobile, { linkBindingEnabled : “slide” });