JqueryUI-스위치 클래스

이 장에서는 switchClass()조작에 유용한 새 클래스입니다. switchClass () 메서드는 한 CSS에서 다른 CSS 클래스로 이동하여 한 상태에서 다른 상태로의 전환에 애니메이션을 적용합니다.

통사론

jQueryUI 버전 1.0에 추가됨

그만큼 switchClass() 방법은 다음과 같은 기본 구문을 가지고 있습니다-

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
Sr. 아니. 매개 변수 및 설명
1

removeClassName

이것은 문자열이며 제거 할 CSS 클래스 이름 또는 공백으로 구분 된 클래스 이름 목록을 나타냅니다.

2

addClassName

이것은 문자열 유형이며 일치하는 각 요소의 클래스 속성에 추가 할 하나 이상의 클래스 이름 (공백으로 구분)을 나타냅니다.

duration

이것은 숫자 또는 문자열 유형이며 선택적으로 느림, 보통, 빠름 또는 효과 기간 (밀리 초) 중 하나를 제공합니다 . 생략하면 animate () 메서드가 기본값을 결정합니다. 기본값은 400 입니다.

4

easing

animate () 메서드에 전달할 여유 함수의 이름입니다.

5

complete

이 요소에 대한 효과가 완료 될 때 각 요소에 대해 호출되는 콜백 메서드입니다.

jQueryUI 버전 1.9에 추가됨

버전 1.9에서이 메서드는 이제 하위 요소에 애니메이션 효과를 주는 자식 옵션을 지원합니다 .

.switchClass( removeClassName, addClassName [, options ] )
Sr. 아니. 매개 변수 및 설명
1

removeClassName

이것은 문자열이며 제거 할 CSS 클래스 이름 또는 공백으로 구분 된 클래스 이름 목록을 나타냅니다.

2

addClassName

이것은 문자열 유형이며 일치하는 각 요소의 클래스 속성에 추가 할 하나 이상의 클래스 이름 (공백으로 구분)을 나타냅니다.

options

이것은 모든 애니메이션 설정을 나타냅니다. 모든 속성은 선택 사항입니다. 가능한 값은-

  • duration− 애니메이션 실행 시간을 결정하는 문자열 또는 숫자. 기본값은 400 입니다.

  • easing− 전환에 사용할 여유 함수를 나타내는 문자열. 기본값은 swing 입니다. 가능한 값은 여기에 있습니다 .

  • complete −이 요소에 대한 효과가 완료되었을 때 각 요소에 대해 호출되는 콜백 메소드입니다.

  • children − 이는 부울이며 일치하는 요소의 모든 하위 항목에 애니메이션을 추가로 적용해야하는지 여부를 나타냅니다.

  • queue − 이펙트 큐에 애니메이션을 배치할지 여부를 나타내는 String / Boolean 유형입니다.

다음 예제는 switchClass () 메서드 의 사용을 보여줍니다 .

<!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>
         .LargeClass {
            font-family: Arial;
            font-size: large;
            font-weight: bold;
            color: Red;
         }
         .NormalClass {
            font-family: Arial;
            font-size: small;
            font-weight: bold;
            color: Blue;
         }
      </style>
      
      <script>
         $(function() {
            $('#btnSwitch').click(function() {
               $(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
               $(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "NormalClass">
         Tutorials Point Rocks!!!
      </div>
      <div class = "NormalClass">
         Welcome to Tutorials Point!!!
      </div>
      <br />
      <input type = "button" id = "btnSwitch" value = "Switch Class" />
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. switchclassexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

상자에서 클래스의 효과를 보려면 클래스 전환 버튼을 클릭하십시오 .