jQuery Mobile - API Configuring Defaults(기본 설정 변경)

JQM은 다른 jquery와 jquery ui를 사용하는 프로젝트와 다르게, 많은 마크업들의 UI를 로드되기 전에 자동적으로 변형합니다. (document.ready 이벤트가 호출되기 전). 이런 변형은 jQuery Mobile의 디폴트 설정을 기반으로 적용됩니다. 이러한 설정을 쉽게 셋팅할 수 있는 방법에 대해 알아봅니다.


The mobileinit event
jQuery Mobile이 실행될 때, document 객체의 mobileinit 이벤트를 호출하게 됩니다. 이 mobileinit 이벤트를 바인드 함으로서 JQuery Mobile의 디폴트 설정들을 오버라이드 할 수 있습니다.
$(document).bind("mobileinit", function(){
  //이곳에 변경하고 싶은 설정을 셋팅합니다.
});
 
mobileinit 이벤트는 실행되는 즉시 호출되기 때문에, jQuery Mobile이 로드되기 전에 여러분의 이벤트 핸들러를 바인드할 필요가 있습니다. 그러므로, 아래와 같이 javascript 파일을 jQuery와jQuery Mobile의 js파일 사이에 추가하시길 권장합니다.
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
 
jQuery의 $.extend 메소드를 사용하여 $.mobile객체를 확장하는 것도 가능합니다.
$(document).bind(“mobileinit”, function(){
 $.extend( $.mobile , {
  foo: bar
 });
});

$.mobile객체의 기본 속성에 foo(bar값을 갖는)속성이 추가되어나, 기존에 같은 속성이 있다면 덮어써집니다.(물론, 세번째 인수를 사용하면 안 덮어쓰게 할수도 있습니다.) 개별적으로 셋팅하기 위해서는 아래와 같이도 사용합니다.
$(document).bind(“mobileinit”, function(){
 $.mobile.foo = bar;
});


Configurable options
아래 속성들은 $.mobile 객체를 통해 설정이 가능합니다.
 
ns (string, default: “”)
예를 들면, data-role와 같이 data-attributes로 사용되는 네임스페이스는 사용자 지정으로 얼마든지 생성이 가능합니다. 사용할 때는 뒤에 dash(-)를 붙여서 data-mynamespace-foo=”…” 식으로 생성합니다. 이것을 사용할 때 여러분은 수동적으로 update 및 override가 필요할 경우도 있을 것입니다. 이런 경우 selector를 사용합니다.
.ui-mobile[data-mynamespace-role=page]
.ui-mobile[data-mynamespace-role=dialog]
.ui-page{ …
 
subPageUrlKey(string, default: “ui-page”)
서브 페이지의 위젯을 참조하기 위해 사용되는 key값 입니다. 예를들어, example.html&ui-page=subpageIdentifier 로 페이지가 이동되면, “&ui-page=” 앞 부분의 hash segment 는 서브 페이지가 존재할 경우 프레임웍에 의해 Ajax request의 대상이 됩니다.
 
nonHistorySeletors(string, default: “dialog”)
data-rel 속성 값을 갖는 anchor 링크, 혹은 data-role 값을 갖는 페이지들의 seletor에 적용하면 history에 남지 않게 됩니다. 이것은 location.hash를 업데이트 하지 않으며, 북마크가 불가능합니다.
 
activePageClass (string, default: "ui-page-active")
이 class는 화면에 보여지는 현재 페이지와 전환되는 페이지에 적용됩니다.
 
activeBtnClass (string, default: "ui-btn-active")
이 class는 css를 통해 active 상태의 버튼에 사용됩니다.
 
ajaxEnabled(Boolean, default: true)
jQuery Mobile은 링크를 클릭하거나 폼을 전송할 때 자동적으로 Ajax를 통해 이루어집니다. 만약, Ajax 요청이 실패하면, url hash listening은 disable될 것이고, url은 일반적인 http요청으로 로드됩니다.
 
useFastClick(Boolean, default: true)
클릭하거나 탭핑하여 Ajax 요청이 이루어질 때, 이 옵션은 jQuery Mobile의 vclick 이벤트를 사용하고, 터치 이벤트를 지원하는 디바이스에서 빠르게 발생하는 페이지 변화를 가능하게 하고, 페이지 전환시 주소바 숨김을 유지합니다. disable 하면 Ajax핸들링 대신에 보통의 click이벤트로 처리됩니다. 이 옵션은 non-touch 디바이트에서는 영향이 없지만, enable일 때 click이벤트가 바인드되어 jQuery plugin을 방해할 수 있습니다.
 
hashListeningEnabled (boolean, default: true)
jQuery Mobile은 자동적으로 location.hash의 변화를 handle하고 listen을 합니다. 이를 disable하면 hash 변경을 핸들링하는 것을 막을 것입니다. 여러분이 직접 hash변경을 다룰수 있게 되며 특별한 ID를 가지고 document내에 deep-link를 사용할 수 있습니다.
 
defaultPageTransition (string, default: 'slide')
Ajax를 사용해 페이지 전환시 디폴트 전환 효과를 셋팅할 수 있습니다. none으로 셋팅하면 전환효과가 발생하지 않습니다.
 
defaultDialogTransition (string, default: 'pop')
Ajax를 사용해 다이얼로그 전환시 디폴트 전환 효과를 셋팅할 수 있습니다. none으로 셋팅하면 전환효과가 발생하지 않습니다.
 
minScrollBack (string, default: 150)
최소 스크롤 distance를 셋팅합니다. 다른 페이지에서 돌아와도 변경되지 않습니다.
 
loadingMessage (string, default: "loading")
페이지가 로딩될 때 나타나는 메시지를 셋팅할 수 있습니다. False로 셋팅하면 메시지가 나타나지 않게 됩니다.
 
pageLoadErrorMessage (string, default: "Error Loading Page")
Ajax 요청으로 페이지가 로딩될 때 로딩 실패시 보여지는 메시지를 셋팅할 수 있습니다.
 
gradeA (function that returns a boolean, default: a function returning the value of $.support.mediaquery)
함수를 가지고 있으면서 브라우저 판별에 사용가능 한 값을 가지고 있습니다.
 
위의 설정들의 현재 값이 궁금하시면 아래 처럼 찍어보시면 됩니다.
<script>
$(document).bind("mobileinit", function(){
alert(     $.mobile.gradeA );
});
</script>