테스트 사이트 - 개발 중인 베타 버전입니다
SIR

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

지운아빠
프로필 보기이 회원 글보기
 · 12년 전 · 2560 · 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개

전진
프로필 보기이 회원 글보기
 12년 전
글이 사라졌길래 지우셨나 했는데, 여기로 왔군요. ^^

js를 이용한 스크린 크기별 class 할당 방식이 '아주' 일반적인 것은 아닐겁니다.
이 방식을 일반화해서 라이브러리로 만드셔도 괜찮을것 같은데요? ^^
지운아빠
프로필 보기이 회원 글보기
 12년 전
저도 라이브러리화 되었으면 좋겠어요! ㅠㅠ
lainfox
프로필 보기이 회원 글보기
 11년 전
만들어 주시는 건가요 ㅎㅎㅎ/

게시글 목록

번호 제목
12386
PHP 메타태그 주요정리 입니다.
12385
JavaScript 광고나 공지사항 띄울때 다음부터 이창을 띄우지 않기 입니다.
12384
MySQL 테이블 생성, 컬럼 추가, 삭제, 수정
12380
JavaScript 입력값을 형식에 맞게 해주는 플러그인이네요 3
12379
JavaScript 팝업창에서 오늘 하루 이 페이지 열지 않기 체크박스 사용입니다.
12378
JavaScript 팝업창 하루에 한번만 열기 입니다
12377
PHP 테이블 사이즈를 제어하기 입니다.
12376
jQuery 유투브 관련 플러그인
12375
jQuery input 태그에 readonly 추가하는 방법
12374
기타 알툴바로 인한 스크립트 오류
12373
jQuery jquery checkbox(radio) 체크유무확인
12372
jQuery 자주 쓰이는 Jquery 팁 20가지 입니다.
12371
jQuery jQuery 오른쪽 퀵메뉴 입니다.
12369
jQuery textarea 글자수 카운트 입니다. 1
368
무료이미지 사이트 2
12368
jQuery ifrmae 자동 리사이즈 jQuery 입니다.
12367
jQuery 슬라이딩 형태로 보여주기 입니다.
12366
jQuery 라인 그래프 그리기 입니다.
12365
jQuery 콤보박스관련 플러그인
12363
MySQL MySQL 기본 명령어 정리 입니다. 1
12362
MySQL MySQL 한글 정렬하기 입니다.
12361
MySQL 그림을 MySQL DB에 저장하는 방법
12360
JavaScript 엑셀 흉내내기
12359
MySQL mysql table 유무 확인 하기 입니다.
12358
MySQL php로 만든 MySQL 백업스크립트 입니다.
이전 다음
전체 목록