웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
닉네임 중복체크 버그 해결방법 [7] | 소렌트. | 2014.06.29 |
마이피플봇을 이용한 마이피플 알리미 (푸시서비스) 이용하기 [4] | garnecia | 2014.06.01 |
에디터가 활성화 되지 않을시... [1] | 똑디 | 2013.11.06 |
에디터 컴포넌트에 현재 mid 값 넘겨주기. [1] | 애니즌 | 2014.07.03 |
jqm(jQuery Mobile) 사용 시 XE의 CSS 와 충돌할 때 | Canto | 2014.07.03 |
[javascript] 기초강좌 | 4장. 비교제어문(if문) | hiwebs | 2014.07.02 |
[javascript] 기초강좌 | 03 논리연산자, 비트, 삼항연산자, 기타연산자 | hiwebs | 2014.07.02 |
[10원팁] 서버에 계정추가후 새로설치하는데 CSS가 깨진다? [3] | 키스미베이베 | 2014.02.27 |
회원가입시 닉네임 특수문자 제한하기 [10] | 절망린 | 2009.06.06 |
[nginx] Rewrite 예외 설정 | okiz | 2014.06.30 |
관리자 비밀번호 분실시 phpmyadmin을 이용하여 재설정하는 방법 [6] | elancer | 2014.03.11 |
BlogAPI 활용하기 | 맞장 | 2014.06.29 |
min.js min.css 정리해서 보기 | Happyphp | 2014.06.26 |
부트스트랩 css 팁 [3] | 돼지코구뇽 | 2014.04.05 |
추천과 추천포인트 관련 팁 [8] | 고진감래 | 2009.09.30 |
관리자가 글 쓸때는 분류를 선택 안 해도 등록되도록 (공지글을 쓸때를 위해) 개선 [2] | sejin7940 | 2014.06.21 |
템플릿 파일에서 일반 PHP 코드 사용 [3] | 화니군 | 2007.08.28 |
XE에서 신디케이션 제거하기 [1] | mAKEkr | 2014.06.20 |
에디터에서 나눔고딕 웹폰트, 기본글꼴로 적용하기(구글API이용) [6] | 애니즌 | 2014.06.06 |
관리자페이지에서 콘텐츠->파일 에서 등록된 파일 전체 리스트에 이미지가 바로 나타나도록 [2] | sejin7940 | 2014.06.19 |