[워크식스] 토글버튼을 만들기 자바스크립트 플러그인 - designToggle_1.0.js

input checkbox를 토글 버튼으로 만들어주는 플러그인

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/designToggle_1.0.js"></script>
 
<style>
input[type="checkbox"].toggle{
    display:none;
}
 
/* designToggle */
.designToggle{
    display:inline-block;
    border:1px solid #e1e1e1;
    width:60px;
    height:30px;
    border-radius: 15px;
    background: #f0f0f0;
    position: relative;
    vertical-align: bottom;
    transition: all 0.2s;
    box-sizing: border-box;
}
.designToggle::after{
    content: "";
    width:28px;
    height:28px;
    border:1px solid #e1e1e1;
    position: absolute;
    left:0;
    top:0;
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s;
}
input[type="checkbox"].toggle:checked + label.designToggle::after{
    left:30px;
}
input[type="checkbox"].toggle:checked + label.designToggle{
    background: #fff;
}
</style>
 
<script>
$(function(){
 
    if ($(".toggle")[0]) {
        $(".toggle").each(function(){
            $(this).designToggle();
        });
    }
 
});
</script>
 
<input type="checkbox" value="y" class="toggle">

설치방법

 

1. Line1 : 제이쿼리를 설치 및 연결 합니다.

 

2. Line2 : 다운로드 받은 플러그인을 설치 및 연결 합니다.

 

3. Line3 ~ 40 : 스타일을 복사 그리고 붙여넣기 합니다. 자신의 홈페이지에 맞게 부분적으로 수정 합니다.

 

4. Line43 ~ Line51 : 스크립트를 복사 그리고 붙여넣기 합니다.

 

5. Line54 : input 체크박스에 toggle 클래스를 추가 합니다.

 

 

 

 

 

 

Install

 

1. Line1: Install and Connect the jQuery.

 

2. Line2: Install and connect the downloaded plug-in. 

 

3. Line3 ~ 40 : Copy and paste the style. Partially modify it to fit your Web site.

 

4. Line43 ~ Line51 : Copy and paste the script.

 

5. Line54 : Add a 'toggle' to the input checkbox.

플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다.

2019/01/15 - [jQuery] - input file 에 스타일 적용 시켜주는 플러그인 designFile.js - 워크식스

2018/01/03 - [jQuery] - [워크식스] 라디오버튼에 스타일 적용하기 - designRadio_1.0.js

2017/12/28 - [jQuery] - [워크식스] 체크박스에 스타일 적용하기 - designCheckbox_1.0.js

[문의하기]

copyright ⓒ 2018. 워크식스