JqueryUI-토글 클래스
이 장에서는 toggleClass()조작에 유용한 새 클래스입니다. toggleClass () 메서드는 일치하는 요소 집합의 각 요소에서 하나 이상의 클래스를 추가하거나 제거합니다.
통사론
jQueryUI 버전 1.0에 추가됨
그만큼 toggleClass() 방법은 다음과 같은 기본 구문을 가지고 있습니다-
.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )| Sr. 아니. | 매개 변수 및 설명 |
|---|---|
| 1 | className 이것은 문자열이며 추가, 제거 또는 전환 할 CSS 클래스 이름 또는 공백으로 구분 된 클래스 이름 목록을 나타냅니다. |
| 2 | switch 이것은 부울 유형이며, 지정된 경우 toggleClass () 메서드가 true 인 경우 클래스를 추가하고 false 인 경우 클래스를 제거합니다 . |
| 삼 | duration 이것은 숫자 또는 문자열 유형이며 선택적으로 느림, 보통, 빠름 또는 효과 기간 (밀리 초) 중 하나를 제공합니다 . 생략하면 animate () 메서드가 기본값을 결정합니다. 기본값은 400 입니다. |
| 4 | easing animate () 메서드에 전달할 여유 함수의 이름입니다. |
| 5 | complete 이 요소에 대한 효과가 완료 될 때 각 요소에 대해 호출되는 콜백 메서드입니다. |
jQueryUI 버전 1.9에 추가됨
버전 1.9에서이 메서드는 이제 하위 요소에 애니메이션 효과를 주는 자식 옵션을 지원합니다 .
.toggleClass( className [, switch ] [, options ] )| Sr. 아니. | 매개 변수 및 설명 |
|---|---|
| 1 | className 이것은 문자열이며 추가, 제거 또는 전환 할 CSS 클래스 이름 또는 공백으로 구분 된 클래스 이름 목록을 나타냅니다. |
| 2 | switch 이것은 부울 유형이며, 지정된 경우 toggleClass () 메서드가 true 인 경우 클래스를 추가하고 false 인 경우 클래스를 제거합니다 . |
| 삼 | options 이것은 모든 애니메이션 설정을 나타냅니다. 모든 속성은 선택 사항입니다. 가능한 값은-
|
예
다음 예제는 toggleClass () 메서드 의 사용을 보여줍니다 .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Switch Class Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.class1 {
border-width : 10px;
border-color : grey;
background-color : #cedc98;
color : black;
}
</style>
<script>
function toggle () {
$("#para").toggleClass ("class1", 1000);
}
</script>
</head>
<body>
<button onclick = toggle()> Toggle </button>
<p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
</body>
</html>위 코드를 HTML 파일에 저장하겠습니다. toggleclassexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.
Toggle 버튼을 클릭 하여 텍스트의 CSS 클래스가 어떻게 변경되는지 확인합니다.