jQuery Mobile 에서 page 초기화를 막고 이벤트만 ( 원하는 옵션만 ) 이용하기

모바일 프로젝트를 핟보면 jQuery Mobile 에 있는 특정 기능만을 사용해야 할대가 있습니다. 예를 들어 swipeleft 와 같은 특정 모바일 이벤트들 을 말하는 것인대요.

 기본적으로 jQuery Mobile 을 불러 올 경우 Document 를 jQuery Mobile 방식으로 변경합니다. 변경이 될 경우 뜻하지 않게  a tag 전체에 ajax 페이지 로딩 적용 및 페이지 하단에 Loading 요소가 생기는등의 작업이 진행 됩니다. 여기서 포스팅할 내용은 jQuery Mobile 에서 페이지 초기화를 간단한 스크립트로 막는 방법입니다.

우선 스크립트는 아래와 같습니다.

	$( document ).on( "mobileinit", function() {
	  $.extend( $.mobile , {
	    autoInitializePage: false,
	  });
	});

 문제는 위의 스크립트를 어디에 넣느냐(?) 인대요. 아래와 같이 jQuery 와 jQuery Mobile 사이에 넣어 주시기 바랍니다. 한 마디로 jquery Mobile 을 불러오기 전에 넣어 주셔야 합니다.

	
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 	
<script>
	$( document ).on( "mobileinit", function() {
	  $.extend( $.mobile , {
	    autoInitializePage: false,
	  });
	});
</script>	
 	
<script src="/common/js/libs/jquery.mobile-1.4.5.min.js"></script>

이제 위와 같이 스크립트를 삽입하여 주시고 loading 과 같은 요소가 생성되는지 확인해보시기 바랍니다.

 추가적으로 autoInitializePage 가 아닌 linkBinding LoadingMessage 와 같은 값들을 설정하여 원하시는 대로 이용하실수 있으니 아래의 링크를 참고하시기 바랍니다.

jQuery 모바일 초기화 설정