요즘 자바스크립트 기반의 라이브러리를 검색 및 활용해야 하는 일이 많네요.

iCheck는 아름다운 Checkbox와 RadioButton를 쉽게 적용할 수 있는 라이브러리입니다. 

물론 jQuery를 기반으로 작동하구요(제가 일부러 jQuery 기반의 라이브러리를 검색하는 것도 이유이겠지만 참 jQuery의 영향력이 대단하다고 느끼고 있습니다).


iCkehck에 대한 기본정보는 다음과 같습니다. 


홈페이지 주소 : http://fronteed.com/iCheck/

깃허브 주소 : https://github.com/fronteed/iCheck/

라이선스 : MIT


일단 라이선스는 MIT 이니깐요. 상용버전에서 사용하셔도 되고, 관련해서 소스코드 공개할 의무는 없습니다.

다만 MIT 라이선스여도, 사용했다면 웹 페이지 어딘가에 해당 라이브러리의 이름 및 라이선스 전문을 명시해야 합니다. 


iCheck는 많은 CSS 파일을 제공하고 있습니다. iCheck를 다운받으셔서 압축을 풀어보시면 skins 라는 폴더에 존재하는데요.

여러 개의 CSS 파일 중 원하는 것을 선택해서 사용하시면 됩니다. 어떤 CSS 파일을 사용할 것인지는 위 홈페이지에서 확인하시면 되구요.


간단하게 사용 방법에 대해서 정리해보면 다음과 같습니다. 


<script src="icheck.min.js"></script>

<link rel="stylesheet" href="skins/square/blue.css">


//html

<input type="checkbox" class="view" id="checkbox1">

<input type="checkbox" class="view" id="checkbox2">

<input type="checkbox" class="view" id="checkbox3">

<input type="checkbox" class="view" id="checkbox4">


<script>

//javascript 

$(".view").iCheck({

checkboxClass: 'icheckbox_square-blue'

});

 

$('.view1').on('ifChecked', function(event){

console.log("checked");

});

 

$('.view1').on('ifUnchecked', function(event){

console.log("unchecked");

});

</script>

실행결과요


이쁘죠? ㅎㅎㅎ 


보시면 아시겠지만... 


$(".view").iCheck({

checkboxClass: 'icheckbox_square-blue'

});

//이쁜 iCheck checkbox를 적용하는 것이죠. 저는 blue skin을 적용했습니다.

 

$('.view1').on('ifChecked', function(event){

console.log("checked");

});

// iCheck로 생성한 checkbox를 선택했을 때 발생하는 이벤트를 처리할 핸들러입니다.

 

$('.view1').on('ifUnchecked', function(event){

console.log("unchecked");

});

// iCheck로 생성한 checkbox를 선택해지 했을 때 발생하는 이벤트를 처리할 핸들러입니다.



간단소개 끝 :-)


+ Recent posts