웹마스터 팁
jqm(jQuery Mobile) 사용 시 XE의 CSS 와 충돌할 때
2014.07.03 03:21
모바일 웹페이지를 만들면서 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. 위 스크립트는 첨부파일로 첨부해 놓겠습니다.
댓글 0
제목 | 글쓴이 | 날짜 |
---|---|---|
요즘 제가 jquery 웹앱 솔루션을 개발했습니다. [2] | 안드류KIM | 2018.04.03 |
jquery swiper | Ansi™ | 2017.02.16 |
jQuery 플러그인 모음 | Ansi™ | 2017.01.25 |
jquery 플러그인: rolVideo.min.js 공개하였습니다. [1] | 딴죽을거는남자 | 2015.10.03 |
팝업모듈에서 jQuery 충돌 해결 - 팝업창이 안뜰때. [5] | 똑디 | 2013.03.22 |
jquery 외부로드하기 [22] | DynamicLaser | 2014.04.07 |
jquery 이미지 이펙트 플러그인 | Ansi™ | 2014.08.19 |
jqm(jQuery Mobile) 사용 시 XE의 CSS 와 충돌할 때 | Canto | 2014.07.03 |
[Jquery] input box border input | pell | 2014.03.21 |
[jQuery] 클릭하면 내용이 사라지는 방법 | 낮은자 | 2014.03.07 |
GNB 메뉴를 쉽게 만드는 jQuery plugin [2] | 김개발 | 2014.02.14 |
[jQuery] PNG투명 이미지 animate시 IE7,8 투명이미지 표현 문제. | 투니페이퍼 | 2014.01.21 |
jQuery fadeIn 홈페이지 부드럽게 이동 [4] | 지그재거 | 2013.08.20 |
새로고침없이 페이지 리로딩 간단하고 쉽게 서버한테는 미안하게 하는법 (서버단이 아니고 스킨에 ㅠ jquery load씀) 게시글,댓글,추천등 모든 부분다가능합니다. [2] | 장포크 | 2013.08.08 |
XE에서 jQuery의 $를 쓸 때에 대한 문제 [7] | Hide_D | 2009.11.21 |
jQuery 강의 #1. css에 대해 이해해보자. [1] | 서기 | 2011.03.03 |
jQuery 강의 #2. 셀렉터에 스타일을 적용해보자. | 서기 | 2011.03.08 |