N스크린 개발에 유용한 framework enquire.js
CSS 미디어쿼리는 화면의 스타일만을 다루기 때문에, 스크린 크기에 따라 다른 자바스크립트를 적용하는데 한계가 있습니다.
이러한 한계를 극복하게 도와주는 것이 바로 enquire.js 입니다.
이 다음 부분부터는 한가하시면 읽어보세요. :)
자바스크립트 적용에 한계 때문에 처음에 생각해보고, TopSchool 님이 다듬어주신 방법이
스크린 크기가 변경될 때 자바스크립트에서 이벤트핸들러나 클래스를 바꿔치기 해주는 방식입니다.
나중에 알고 보니 거의 일반적으로 쓰이는 방법이더군요.
간단하게 예를 들자면
--- php
기기 감지하는 변수가 이미 선언되어 있고 ($is_mobile)
if ($is_mobile) $event_handler = 'click focus';
else $event_handler = 'mouseover focus';
--- jquery
$(window).resize(function(){
if ($(window).width() == '320') {
$("#sir_gnb").addClass("gnb320");
} else if ($(window).width() == '480') {
$("#sir_gnb").addClass("gnb480");
}
}
$(function(){
$(".gnb320").bind("<?php echo $event_handler; ?>", function() {
// 가로 너비가 320px 일때 모바일과 PC 각각의 효과
}
$(".gnb480").bind("<?php echo $event_handler; ?>", function() {
// 가로 너비가 480px 일때 모바일과 PC 각각의 효과
}
}
--- stylesheet
#sir_gnb.gnb320 {스타일 정의}
#sir_gnb.gnb480 {스타일 정의}
처럼 되는데요.
이 방법과 동일하면서 더 다양한 콜백 기능을 제공해주는 녀석이 enquire.js 입니다.
전체 스크립트 크기도 1kb 도 안 되지만 N스크린 개발에 상당히 유용할 것으로 보이네요.
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 3개
js를 이용한 스크린 크기별 class 할당 방식이 '아주' 일반적인 것은 아닐겁니다.
이 방식을 일반화해서 라이브러리로 만드셔도 괜찮을것 같은데요? ^^