이전
목록
다음
탈

N스크린 개발에 유용한 framework enquire.js

지운아빠
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2013-10-30 (수) 11:24:50 · 5491 · 3
2013-10-30 오전 11-24-23.jpg


반응형에 누구보다 열정적으로 반응하는 남자 전진님의 소개로 알게 된 js framework 를 소개합니다. :)

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개

전진
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2013-10-30 (수) 21:10:00
글이 사라졌길래 지우셨나 했는데, 여기로 왔군요. ^^

js를 이용한 스크린 크기별 class 할당 방식이 '아주' 일반적인 것은 아닐겁니다.
이 방식을 일반화해서 라이브러리로 만드셔도 괜찮을것 같은데요? ^^
지운아빠
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2013-11-05 (화) 09:00:14
저도 라이브러리화 되었으면 좋겠어요! ㅠㅠ
lainfox
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-04-30 (수) 10:04:46
만들어 주시는 건가요 ㅎㅎㅎ/
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
13-12-07 조회 3,109
13-12-06 조회 2,628
13-12-06 조회 3,169
13-12-06 조회 2,746
13-12-06 조회 2,972
13-12-06 조회 2,653
13-12-06 조회 3,394
13-12-06 조회 3,720
13-12-06 조회 2,740
13-12-06 조회 2,694
13-12-06 조회 3,784
13-12-05 조회 2,735
13-12-05 조회 3,330
13-12-05 조회 3,188
13-12-05 조회 3,594
13-12-05 조회 3,496
13-12-04 조회 8,319
13-12-03 조회 3,470
13-12-02 조회 2,749
13-12-02 조회 2,604
13-11-30 조회 2,544
13-11-29 조회 2,800
13-11-28 조회 3,013
13-11-27 조회 3,610
13-11-27 조회 3,003
13-11-27 조회 3,382
13-11-27 조회 2,534
13-11-27 조회 2,708
13-11-27 조회 4,750
13-11-26 조회 4,004
13-11-25 조회 3,493
13-11-25 조회 5,290
13-11-23 조회 2,653
13-11-23 조회 4,772
13-11-23 조회 4,326
13-11-23 조회 4,088
13-11-23 조회 4,030
13-11-22 조회 3,030
13-11-22 조회 3,705
13-11-22 조회 3,570
13-11-22 조회 3,124
13-11-22 조회 5,532
13-11-21 조회 2,767
13-11-21 조회 3,253
13-11-20 조회 3,627
13-11-19 조회 4,057
13-11-19 조회 3,061
13-11-19 조회 3,684
13-11-19 조회 3,035
13-11-19 조회 4,799
13-11-18 조회 3,082
13-11-18 조회 2,900
13-11-18 조회 3,205
13-11-18 조회 4,959
13-11-18 조회 4,356
13-11-18 조회 6,822
13-11-18 조회 4,044
13-11-18 조회 4,468
13-11-18 조회 3,830
13-11-18 조회 3,881
13-11-18 조회 3,150
13-11-16 조회 3,179
13-11-15 조회 4,420
13-11-15 조회 3,204
13-11-14 조회 2,948
13-11-14 조회 3,701
13-11-14 조회 4,068
13-11-13 조회 3,190
13-11-13 조회 3,237
13-11-13 조회 3,418
13-11-13 조회 4,292
13-11-13 조회 3,120
13-11-12 조회 3,434
13-11-12 조회 5,649
13-11-07 조회 3,180
13-11-07 조회 3,150
13-11-06 조회 3,106
13-11-05 조회 3,819
13-11-05 조회 3,591
13-11-05 조회 6,635
13-11-05 조회 3,569
13-11-04 조회 3,179
13-11-04 조회 3,198
13-11-04 조회 2,980
13-11-02 조회 3,634
13-11-02 조회 3,257
13-11-01 조회 3,512
13-11-01 조회 2,891
13-11-01 조회 3,040
13-10-31 조회 3,114
13-10-31 조회 3,508
13-10-31 조회 3,902
13-10-31 조회 3,091
13-10-30 조회 3,395
13-10-30 조회 7,654
13-10-30 조회 5,492
13-10-30 조회 3,368
13-10-29 조회 3,201
13-10-29 조회 4,366
13-10-29 조회 3,626
글쓰기