<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="//work6.kr/plugin/plugin_link/43"></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: middle; 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. Line5 ~ 39 : 스타일을 복사 그리고 붙여넣기 합니다. 웹 사이트에 맞게 수정 합니다.
4. Line43 ~ 51 : 스크립트를 복사 그리고 붙여넣기 합니다.
5. Line54 : input 체크박스에 toggle 클래스를 추가 합니다.
Install
1. Line1: Install and connect to jquery.
2. Line2: Register the domain after using the plug-in. Copy and paste code.
3. Line5 ~ 39: Copy and paste the style. Modify it to fit your website.
4. Line 43 ~ 51: Copy and paste the script.
5. Line54: Add the toggle class to the input checkbox.