요즘 자바스크립트 기반의 라이브러리를 검색 및 활용해야 하는 일이 많네요.
iCheck는 아름다운 Checkbox와 RadioButton를 쉽게 적용할 수 있는 라이브러리입니다.
물론 jQuery를 기반으로 작동하구요(제가 일부러 jQuery 기반의 라이브러리를 검색하는 것도 이유이겠지만 참 jQuery의 영향력이 대단하다고 느끼고 있습니다).
iCkehck에 대한 기본정보는 다음과 같습니다.
일단 라이선스는 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");
});
간단소개 끝 :-)
'자바스크립트,부트' 카테고리의 다른 글
| 자바스크립트(javascript) Spinner, Progress 라이브러리 (0) | 2015.03.11 |
|---|---|
| jQuery 기반 심플하면서 예쁜 Library 추천 (0) | 2015.03.11 |
| JUI 소개 - 심플하면서 예쁜 jQuery UI (2) | 2015.03.11 |
| jQuery Selectric - 간단 소개, JavaScript, jQuery, Select (0) | 2015.03.04 |
| iCheck - 간단 소개, JavaScript, jQuery, Cehckbox, RadioButton (0) | 2015.02.09 |
| noUiSlider - 간단 소개, JavaScript, jQuery, Slider, Slide (0) | 2015.02.08 |
| jQuery ajax - async and sync (0) | 2015.01.26 |
| jQuery UI - Select change example (0) | 2015.01.02 |
