JQuery,
toggle,
work6.kr,
개발자,
워크식스,
웹개발자,
웹디자이너,
웹디자인,
웹퍼블리셔,
웹퍼블리싱,
자바스크립트,
제이쿼리,
커스터마이징,
토글버튼,
튜닝,
포트폴리오,
프로그래머,
플러그인
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
'IT' 카테고리의 다른 글
직접 제작한 PHP 프레임워크 (0) | 2018.07.25 |
---|---|
관리프로그램 웹용 프레임워크 (0) | 2018.06.28 |
[워크식스] 토글버튼을 만들기 자바스크립트 플러그인 - designToggle_1.0.js (0) | 2018.06.20 |
[워크식스] select 에 css 적용하기 - designSelect_1.4.js (0) | 2018.06.18 |
php curl post 통신 (0) | 2018.06.17 |
[워크식스] 25 명함디자인 (0) | 2018.06.12 |