Jquery 스위치 버튼 - Jquery seuwichi beoteun

jquery .toggle()

.toggle()은 두개의 상태를 번갈아 바꾸는 설정값 같은것이라 할 수 있다.

토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다.

토글이 어떤것인지는 위의 예시들을 보면 어떤것인지 대략 감을 잡을수 있다 생각한다. 

이해가 아직 안된다면 아래의 이미지를 보면 도움이 될것이다.

.toggle()는 예전에 언급했던 show()와 hide()를 반복적으로 수행하는 제이쿼리 함수이다.

[웹언어/jQuery] - [jQuery] 제이쿼리 show / hide

[jQuery] 제이쿼리 show / hide

jquery .show() .show()는 요소의 css가 display:none; 일 때 요소를 display:block;으로 바꿔주는 함수이다. 예시) 아래의 button을 눌러서 숨겨진 요소를 보이게 할 수 있다. 요소 보이게 하기 팝업입니다. $(d..

jh91.tistory.com

.toggle()는 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 해준다. 

.toggle('시간') 토글의 괄호() 안에는 시간을 넣을수 있다.

컴퓨터에서 시간은 1000이 1초이다

약어인 fast와 slow를 넣을수도 있는데 fast는 200 (0.2초) / slow는 600 (0.6초)에 해당하며

기본값(아무것도 넣지 않은 상태)은 400 (0.4초)로 설정됩니다. 

.toggle('fast');  //(0.2초)
.toggle('slow'); //(0.6초)
.toggle('500');  //(0.5초)

.toggle()에는 ()에 click 처럼 function을 넣을수 있다. 

.toggle(function(){
    //함수();
    //다양한 매소드 들을 사용할 수 있다.
    //토글의 function은 요소가 나타난 다음에 함수를 실행한다.
})

.toggle()은 show와 hide의 반복이기때문에 스위치 역할은 할수 없다

집으로 따지면 전등의 역할은 할 수 있다.

(불이 켜지고 꺼지고 요소가 사라졌다 나타났다)

toggle을 컨트롤 할 수 있는 버튼을 만들어 toggle을 제어 하자

코드팬

See the Pen jQuery .toggle() by 윤재현 (@jh91) on CodePen.

Learn how to create a "toggle switch" (on/off button) with CSS.

Try it Yourself »

How To Create a Toggle Switch

Step 1) Add HTML:

Example

<!-- Rectangular switch -->
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<!-- Rounded switch -->
<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

Step 2) Add CSS:

Example

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Try it Yourself »