[jQuery]jQuery로 iPhone스타일의 Checkbox 만들기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

아이폰이 전세계적으로 히트친 뒤로 아이폰의 UI는 하나의 상징이 되어버렸습니다.(요즘도 루머때문에 국내에서 난리죠.)

Thomas Reynolds라는 사람이 jQuery를 이용해서 iPhone스타일의 checkbox를 웹에서 구현할 수 있는 스크립트를 만들어서 공개했습니다. 실제 아이폰의 체크박스처럼 아주 부드럽게 잘 동작합니다.

1 2 3 4 5 6 7 8

<script src="jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script> <script src="iphone-style-checkboxes.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" /> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $(':checkbox').iphoneStyle(); }); </script>

저는 jQuery는 거의 안만져봤지만 사용법은 아주 간단합니다. jQuery를 인클루드하고 iphone스타일로 바꾸기 위한 Thomas Reynolds의 js파일과 CSS와 이미지 5개면 준비가 끝이고 Dom Ready 콜백에 iphoneStyle()함수를 지정만 해주면 간단하게 실행됩니다.

위 스크린샷처럼 아주 깔끔하게 표현이 됩니다. Thomas Reynolds의 아이폰스타일 체크박스 소개페이지를 보면 간단한 예제를 볼 수 있습니다. 머 체크박스를 바뀌주는 것이므로 이 이상의 예제도 없기는 합니다. 옵션을 주면 기본인 ON/OFF 메시지 대신 원하는 글자를 표시해 줄 수도 있습니다. 소스저장소를 보면 처음 소개할때보다 소스가 좀더 나아져서 스타일 class에 대한 지정을 옵션으로 줄 수 있습니다.

가장 좋은 점은 역시 js가 돌아가지 않으면 일반적으로 보는 checkbox를 그대로 볼 수 있기 때문에 접근성에도 문제가 별로 없어보입니다. 전 jQuery를 아직은 안써봐서 이걸 prototype.js기반으로 해볼까 했는데 소스저장소를 보니까 이미 prototype.js기반으로도 제작중이군요.(아직 제대로 돌아가지는 않습니다.)