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 : “http://spaceii.com/index.html&ui-page= #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”

});