jQuery Mobile(PhoneGap) [jQuery Mobile] 설정

황제낙엽 2012.11.15 17:48 조회 수 : 84

sitelink1 http://opentutorials.org/course/473/2514 
sitelink2  
sitelink3 http://1 

 

기본설정

jQuery Mobile은 document.ready 이벤트가 발생하기 전에 기본설정을 셋팅한다. 기본설정을 변경하고 싶으면 아래와 같은 방법을 따라야 한다.

(이벤트란 사건을 의미하는데, 프로그래밍적인 의미에서 이벤트란 이를테면 '페이지의 로딩이 끝났다', '사용자가 버튼을 클릭했다'와 같은 사건들을 말한다. 이 사건이 일어났을 때 무엇을 해야 하는 가를 미리 정의해두면 그 사건이 일어났을 때 그 일들이 실행된다. 이러한 프로그래밍 기법을 이벤트 프로그래밍이라고 한다.)

mobileinit event

jQuery Mobile이 처음 시작할 때 mobileinit 이벤트가 발생한다. 이 이벤트를 이용해서 기본설정을 변경할 수 있다.

1
2
3
$(document).bind("mobileinit", function(){
  //jQuery Mobile 설정 값이 위치
});

mobileinit 이벤트는 즉시 실행되기 때문에 jQuery Mobile 자바스크립트가 로드되기 전에 미리 이벤트를 바인딩해야 한다. 초기 설정 값을 변경하려면 아래와 같은 순서로 파일을 로드해야 한다.

1
2
3
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

전체소스

jquery-mobile.js 파일에 아래와 같은 형식의 코드를 작성한다. 아래 예제는 페이지를 로드할 때 ajax통신을 이용하지 않고 페이지를 새로 읽는 방식으로 변경한다.  

1
2
3
$(document).bind("mobileinit", function(){
  $.mobile.ajaxEnabled = false;
});

설정 옵션

여기서는 모든 옵션을 다루지 않고 주요한 옵션만을 언급한다. 자세한 내용은 아래의 문서를 참고한다.

http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

ajaxEnabled

데이터 타입 :boolean, 기본값 : true

페이지를 로드할 때 ajax 통신을 하지 않는다. 로드 대상이 되는 파일에 자바스크립트가 있을 때 ajax로 페이지를 읽으면 오류가 발생하는 경우가 있는 데 이런 경우 ajax 통신을 하지 않는 것이 유용한다. 또 장면전환 효과를 사용하지 않는 경우도 사용할 수 있다.

전체소스

defaultPageTransition

데이터 타입 : string, 기본값 : fade

기본 페이지 전환효과를 지정한다. 기본 값을 fade로 화면의 투명도가 교차되면서 장면전환이 이루어진다. 장면전환 효과를 사용하지 않으려면 'none' 값을 지정한다.

1
2
3
4
5
<script>
    $(document).bind("mobileinit", function(){
        $.mobile.defaultPageTransition = 'slide';
    });
</script>

전체소스

장면전환 효과에 대한 자세한 내용은 아래의 링크를 참조한다.

http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

이 게시물을
목록
쓰기 태그