웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
빈공간 더블 클릭시 상하 이동 스크립트 | socialskyo | 2014.07.23 |
이메일인증 Error 한방정리 참고해보세요. [4] | 애드바이러스 | 2014.02.12 |
로그인 안하면 코멘트 볼 수 없게 스킨 수정하는 법 [3] | W.O | 2014.03.23 |
회원 비밀번호 수정시 자동으로 로그아웃 되게 하는 방법 [4] | sejin7940 | 2014.07.18 |
특정 확장변수를 글 추천자에게만 보이게 하기 [10] | 뮤랑이 | 2010.01.11 |
관리자만 글 등록이 되고, 일반 유저는 글 등록버튼을 누르면 아무런 반응이 없을 때. [1] | whitemind | 2013.11.07 |
모바일(또는 textarea형)에서 댓글 수정시 줄바꿈 유지되도록 수정 [2] | sejin7940 | 2014.07.17 |
댓글등록에 단축키 사용하기 | ひりゅう. | 2014.07.15 |
이전글, 다음글 코어 건드리지 않고 사용하기 (모듈X, 애드온X) (업데이트) [8] | 시니시즘 | 2013.01.26 |
SocialXE 관련 사용팁 적용 수정 파일 [3] | 휘즈 | 2014.07.13 |
외부 페이지에서 회원 extra_vars 변수 가져오기 [1] | Happyphp | 2014.07.09 |
특정게시판, 비밀글로 작성하기 (대암지기님 팁 보완) [9] | 된장맛껌 | 2010.03.17 |
게시판 접속시에 첫(제일 최근) 게시물이 보여지게 하기 [16] | foret | 2014.03.08 |
편리한 안드로이드 크로스 브라우징 테스트 Tip - 안드로이드 가상화 | AJKJ | 2014.07.09 |
htm과 html의 차이는 ? | 디테일 | 2014.06.17 |
1.7 버전 사이트 메뉴 편집 사용법 [4] | 휘즈 | 2013.07.27 |
MRTG에서 네트워크및 CPU, 메모리점유율을 기록하기 | ひりゅう. | 2014.07.05 |
XE 왕초보를 위한 글 [13] | 휘즈 | 2009.08.06 |
php 세션을 memcache에 저장할 때 주의할 점 | XE러버 | 2014.07.04 |
클리어픽스(clearfix)의 개념과 방법 | 시니시즘 | 2014.07.04 |