최근 프로젝트 진행하며 사용한 유용한 jQuery 플러그인

기본

1. jQuery Placeholder

HTML5에 등장한 속성인 placeholder는 폼에 디폴트 문구를 표시할 수 있어 매우 유용합니다만.. IE에서 제대로 보여주지 못하는 치명적인 단점이 있습니다. 이를 보완할 수 있는 jQuery 플러그인! 사용법도 상당히 쉽습니다. placeholder 속성에 원하는 기본 문구를 작성한 후.. placeholder()를 뙇!

$("input").placeholder();
<input type="text" placeholder="Foobar"/>

2. jQuery Create Event

live() 함수가 deprecated 되긴 했지만.. 프로젝트에서 1.4.x 버전을 사용하기 때문에 별 고민 없이 사용한 플러그인 입니다. 이 플러그인은 live() 함수에서 “create” 이벤트(DOM에 새로 엘리먼트가 추가된 경우)를 감지할 수 있게 합니다.

$("someDiv").live("create", function(...));

Ajax로 서버에서 데이터를 받아온 후, 특정 부분이 업데이트 됐을 경우 어떤 행동을 해야한다면 이 플러그인을 써보세요.

3. jQuery Data Selector

jQuery API 중에 해당 DOM에 객체를 저장할 수 있는 data() 함수가 있습니다. 간단하게 key/value로 이루어져 있는데요. jQuery Data Selector 플러그인은 jQuery 셀렉터에 data()로 저장한 key/value를 검색할 수 있게끔 확장해 줍니다.

$(function(){
    // Attach data to the 2nd li
    $('#dataSelector li').eq(1).data('foo', 'bar');
    // Change the color of the li whose foo key is == bar
    $('#dataSelector li:data(foo=bar)').css('color', 'red');
});

4. jQuery Wordcount

트위터 글 입력 폼 같이 사용자가 몇 글자 입력했는지 알아보려고 textarea를 만든 다음에 keyup, keydown, keypress 같은 이벤트를 걸고 크로스브라우징 테스트를 해보면 특정 브라우저에서 생각대로 잘 동작하지 않습니다. 아쉬운 일이지만 브라우저에서 한글 키 입력 이벤트를 제대로 처리하지 못하기 때문인데요. 이를 보완하기 위해 타이머 이벤트로 특정 시간 마다 글자 수를 체크해서 업데이트 하는 플러그인을 만들어 봤습니다. 처음으로 만든 jQuery 플러그인이네요 ㅋ

사용법은 나름 간단합니다:

$("textarea").wordcount({
    countElement: $("span")
});
이번 프로젝트 진행하면서 만든 플러그인이 하나 더 있었네요! 두 번째 플러그인이군요. 이 플러그인은 jQuery UI Datepicker 예제에 나와있는 날짜 범위 선택을 재사용 하기 쉽게 만든 플러그인 입니다. 소소한 제한사항이 있으니 코드에 있는 주석을 꼭 읽어보세요.
사용법은 이런식입니다:
$("#from, #to").datepickerRange();
자매품으로 class 셀렉터를 사용할 수도 있습니다:
$(".from, .to").datepickerRange({
    dateFormat: "yy-mm-dd"
});
혹시 사용하다가 이상한 점을 발견하시면 이슈 등록 부탁드려요! (이 포스팅의 목적)