웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
1.0.3버전 외부 페이지 쿼리 스트링 붙일때 주의 하세요. | 그라미 | 2008.06.03 |
일정 기간이 지난 글에 코멘트 등록 제한 [3] | 老姜君 | 2008.06.03 |
링크 사이트 제작을 위한 어드바이스 - Planning 1 - [7] | Hammer | 2008.06.04 |
링크 사이트 제작을 위한 어드바이스 - Planning 2 - [6] | Hammer | 2008.06.04 |
1.03버전 글쓸때 오류... [1] | 화려한 부활 | 2008.06.05 |
이전글,다음글 얻기 (검색결과 까지 포함) (수정) [8] | 라르게덴 | 2008.06.05 |
2차메뉴 롤오버 위치 변환.. [3] | 봄처녀 | 2008.06.05 |
링크 사이트 제작을 위한 어드바이스 - Fade In MouseOver - [3] | Hammer | 2008.06.06 |
(위젯) 이미지 클라우드 스킨 사용 법 [2] | Simulz | 2008.06.06 |
PHP 폼메일 [9] | 헥토르 | 2008.06.09 |
링크 사이트 제작을 위한 어드바이스 - MouseOver Preview - [6] | Hammer | 2008.06.10 |
설치시 초기화면으로 돌아가는 문제 해결방법 [4] | PICSTORY™ | 2008.06.11 |
☆조회수.추천수 구간에 따른 이미지 나타내기(Hot 등..) - 갤러리게시판&최근이미지위젯☆ [5] | 오기오기 | 2008.06.12 |
페이지 숫자에 네이버처럼 사각테두리 씌우기 [8] | 탑심 | 2008.06.15 |
할수 있다!! 내 맘대로 DB주무르기 ★DB방식 변경★ | 토리세상 | 2008.06.16 |
페이지 작성이나 수정후 적용이 안돼서 고생하는 많은 분들을 위하여 [1] | cyric | 2008.06.17 |
설치후 권한 재조정 [4] | 덱스터 | 2008.06.17 |
썸네일 생성이 되지 않을시 확인할 내용.. [4] | 또나아빠 | 2008.06.17 |
아이프레임속 링크를 기존페이지에서 이동하기 [1] | 정다운804 | 2008.06.19 |
업그레이드 쉽고,안전하게 하기 [5] | wannabewize | 2008.06.21 |