웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
자신의 홈페이지에 플래시 오락실을 등록 해보자. [2] | 조성우371 | 2008.12.20 |
회원정보 이미지 항목 추가 [3] | 개돌 | 2008.12.22 |
메인 페이지가 백지로 나올 때 이렇게 해보세요. [4] | 시금치 | 2008.12.23 |
IIS7, PHP 5, MySQL 5, 제로보드 설치기 [1] | 54장 | 2008.12.26 |
음악판매 [5] | 물푸레646 | 2008.12.27 |
업그레이드 후 아이콘 혹은 이미지 깨짐현상 발생시 [2] | 플로리다 | 2008.12.31 |
로그인한 회원만 최근 게시글, 검색등 볼수 있도록 하기 [3] | [_)s | 2008.12.31 |
.htaccess 파일을 쉽게 만드는 방법 [5] | 김병화999 | 2009.01.01 |
확장 컴포넌트 출력 아이콘 표시 | o앙마o | 2009.01.02 |
rewrite 모듈 - 아파치 설정.. [1] | 야간비행7 | 2009.01.03 |
사진 첨부 등록 시 화일 사라짐 [2] | 정욱재 | 2009.01.03 |
XE 업그레이드후 모듈 업데이트 안되고, 모듈 생성시 이미 존재하는 모듈이라고 나올때 | 또나아빠 | 2009.01.05 |
팁이라고까지 할껀 없지만.....(db날렸을때..카페24사용시) [3] | 왜만지냐 | 2009.01.06 |
전화번호 형식의 확장변수를 목록에 출력하고 싶을 때 | serendip | 2009.01.06 |
UCC솔루션에 대한 조사입니다~^^ [2] | 내다 | 2009.01.08 |
회원가입시 닉네임 중복사용 가능하게 하기.. [3] | 一淚™ | 2009.01.08 |
XE 초기설치시 error 500 이 나오며 설치가 안될때 [1] | sangjaezzi | 2009.01.09 |
알ftp, editplus 계정정보 파일 백업 | yjnet | 2009.01.10 |
SMTP 인증 회원가입 메일 인증 , 비밀번호 오류찾기 및 답변글 메일로 받기 [11] | FFHosting | 2009.01.12 |
제로보드XE 쉽게 업데이트 하는 방법.. [13] | 청개구리00 | 2009.01.12 |