jquery iCheck plugin 사용 삽질기

서론

나요즘 왜이러니?

동료에게 얻은 소스를 이용해서 소스분석을 하다가 Bootstrap 기반의 UI구성이라 event 처리가 

기존 jquery 방식과 별다른 차이가 없을줄 알고 덤볐는데 이게 왠걸~

당최 Bootstrap 가 먹힌 element들의 이벤트가 발생하지 않았다.

아놔 이거 뭐지... 내가 잘못배웠나?

결국에 구글링을 하고, 삽질을 또 겁나게 한 후, 전체소스를 찬찬히 확인해 보니 jquery plugin이 하나 삽입되어 있었다. 

이름하여 iCheck 두둥!! 이녀석이군하... 그래 내가 미쳤지 진작 이걸 봤으면 이래 삽질을 안해도 될것을 ㅠㅠ

본론

예제 사이트 : http://icheck.fronteed.com/

메인 사이트 : https://github.com/fronteed/iCheck

위 사이트를 참고한 결과, bootstrap의 ui와 별도로 iCheck 플러그인에 의한 check box, radio button의 ui를 

다양한 디자인으로 구성할 수 있었다. 고도로 커스터마이징 가능하다고 나온다.

단, ui만 적용가능한것이 아니라 event handling 까지 가능했다.

( ※ 체크박스와 라디오 버튼만을 대상으로 하므로 주의할것! 

다른 input box, select , textarea 등은 기존 event handling하듯 사용하면 된다. )

자세한 건 사이트를 참고하자.

결론

그냥 동료에게 빨랑 물어볼껄~ 괜히 휴가라 물어보기 미안하다고 혼자 객기를 부렸나 싶다..

이럴 땐 후다닥 바로 동료에게 물어보자.

iCheck은 별도 이벤트 처리 방법이 있답니다! 아래 참고!

Callbacks

iCheck provides plenty callbacks, which may be used to handle changes.

Callback name	When used
ifClicked	user clicked on a customized input or an assigned label
ifChanged	input's checked, disabled or indeterminate state is changed
ifChecked	input's state is changed to checked
ifUnchecked	checked state is removed
ifToggled	input's checked state is changed
ifDisabled	input's state is changed to disabled
ifEnabled	disabled state is removed
ifIndeterminate	input's state is changed to indeterminate
ifDeterminate	indeterminate state is removed
ifCreated	input is just customized
ifDestroyed	customization is just removed

Use on() method to bind them to inputs:

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

ifCreated callback should be binded before plugin init.

Methods

These methods can be used to make changes programmatically (any selectors can be used):

$('input').iCheck('check'); — change input's state to checked

$('input').iCheck('uncheck'); — remove checked state

$('input').iCheck('toggle'); — toggle checked state

$('input').iCheck('disable'); — change input's state to disabled

$('input').iCheck('enable'); — remove disabled state

$('input').iCheck('indeterminate'); — change input's state to indeterminate

$('input').iCheck('determinate'); — remove indeterminate state

$('input').iCheck('update'); — apply input changes, which were done outside the plugin

$('input').iCheck('destroy'); — remove all traces of iCheck

You may also specify some function, that will be executed on each method call:

$('input').iCheck('check', function(){
  alert('Well done, Sir');
});

Feel free to fork