모바일 웹페이지를 만들면서 jQuery Mobile 을 한번쯤 써보신 분들 많이 계실 것이라고 생각합니다.

그렇지만 요 jqm을 XE에서 쓸려고 하면 XE의 기본 CSS 와.. 게시판 스킨들의 CSS와 충돌을 하여 써먹기 애매한 경우가 많습니다.

그럴 때 jqm에서 적용시키는 css 요소들을 초기화 시키는 방법을 알려드립니다.

일단 하단 스크립트를 하나의 파일로 저장하고 레이아웃 폴더에 업로드 합니다. 

저는 reset.jqm.js 라고 저장했습니다.

jQuery(document).bind('mobileinit',function(){jQuery.mobile.page.prototype.options.keepNative=".data-role-none, .data-role-none *";});

그다음 레이아웃에서 jqm을 로드해주는 부분..

보통 

<load target="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js" />

이런식으로 쓰실 것으로 생각합니다.

이 한칸위에

<load target="./reset.jqm.js"/>

를 적어줍니다.

그다음 

{$content}

를 div 로 둘러싸주시고

해당 div의 class를 data-role-none 로 설정해줍니다.

<div class="data-role-none">

{$content}

</div> 

이런식으로요..

그다음 레이아웃을 저장해주시면..

그 전까지 jqm의 css 로 적용되어있었던 $content 부분.. (게시판 등등..) 의 스타일이 원상태로 돌아와있는 것을 볼 수 있으실 것입니다.!!

많은 모바일용 js프레임워크들이 존재하고.. 그중에서 많이 쓰이고 있는 것이 jqm이지만.. xe에 적용하기가 상당히 애매했던것이 사실입니다.

요팁을 사용하셔서 모바일 레이아웃을 만드실때 jqm을 한번 이용해 보시는 것도 좋을 듯 싶습니다.!!

ps. 위 스크립트는 첨부파일로 첨부해 놓겠습니다.