1. http://callmenick.com/post/css-toggle-switch-examples 에 들어간다.
2. Get source 버튼을 눌러 다운을 받아준다.
3. 받은 파일 압축을 풀어준다.
4. css폴더안에 style.css 를 프로젝트 안에 넣어준다.
5. <head></head> 사이에 css를 지정해준다.
<link href="경로/css/switch.css?ver=1" rel="stylesheet" />이름을 바꿔 사용해도 무방하다.
6. 기본형은 아래와 같고 응용해서 사용하면 된다.
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
<label for="cmn-toggle-1"></label>7. 자바스크립트 Checkbox Checked 여부확인은 아래와 같이 하면된다.
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" onclick="test(this);">
<label for="cmn-toggle-1"></label>function test(obj){
var cb_id = document.getElementById(obj.getAttribute('id'));
if(cb_id.checked){
console.log("true"); // 클릭
}else{
console.log("false"); // 클릭 X
}
}
function test(obj){
var cb_id = $(obj).attr('id');
if($("#"+cb_id).prop("checked")){
console.log("true"); // 클릭
}else{
console.log("false"); // 클릭 X
}
}
8. 스위치의 크기 색깔등을 바꾸고 싶을때는 css 파일을 열어 필요한 부분만 수정해주면 된다.
/*그냥 보일때*/
input.cmn-toggle-round + label { width:50px; height:25px;}
input.cmn-toggle-round + label:after {width:25px;}
/*클릭 후 원 위치*/
input.cmn-toggle-round:checked + label:after { margin-left:23px;}
/*클릭 시 색깔*/
input.cmn-toggle-round:checked + label:before { background-color : #68a4c4}
등등 입맛에 맞게 사용하면 된다.
'DEV > CSS' 카테고리의 다른 글
| 선택 동작 없애기 (0) | 2017.11.22 |
|---|---|
| HTML 색상표 (0) | 2017.10.27 |
| 부트스트랩 테이블 정렬 (0) | 2017.08.30 |
| input, textarea, button 파란색 테두리 제거 및 색상 바꾸기 (0) | 2017.08.29 |
| 비율 유지 이미지 object-fit (0) | 2017.08.16 |