JqueryUI - Chuyển lớp

Chương này sẽ thảo luận về switchClass()phương thức, là một lớp mới hữu ích để thao tác. Phương thức switchClass () di chuyển từ CSS này sang lớp CSS khác, tạo hiệu ứng chuyển đổi từ trạng thái này sang trạng thái khác.

Cú pháp

Đã thêm vào phiên bản 1.0 của jQueryUI

Các switchClass() phương thức có cú pháp cơ bản như sau:

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
Sr.No. Mô tả về Thông Số
1

removeClassName

Đây là một Chuỗi và đại diện cho tên lớp CSS, hoặc danh sách tên lớp được phân tách bằng dấu cách, sẽ bị xóa.

2

addClassName

Đây là kiểu Chuỗi và đại diện cho một hoặc nhiều tên lớp (được phân tách bằng dấu cách) được thêm vào thuộc tính lớp của mỗi phần tử được so khớp.

3

duration

Đây là loại Số hoặc Chuỗi và tùy chọn cung cấp một trong các tốc độ chậm, bình thường, nhanh hoặc thời lượng của hiệu ứng tính bằng mili giây. Nếu bị bỏ qua, phương thức animate () sẽ xác định giá trị mặc định. Giá trị mặc định của nó là 400 .

4

easing

Tên của hàm nới lỏng sẽ được chuyển cho phương thức animate ().

5

complete

Đây là một phương thức gọi lại được gọi cho mỗi phần tử khi hiệu ứng hoàn tất cho phần tử này.

Đã thêm vào phiên bản 1.9 của jQueryUI

Với phiên bản 1.9, phương pháp này hiện hỗ trợ tùy chọn trẻ em , tùy chọn này cũng sẽ tạo hoạt ảnh cho các phần tử con cháu.

.switchClass( removeClassName, addClassName [, options ] )
Sr.No. Mô tả về Thông Số
1

removeClassName

Đây là một Chuỗi và đại diện cho tên lớp CSS, hoặc danh sách tên lớp được phân tách bằng dấu cách, sẽ bị xóa.

2

addClassName

Đây là kiểu Chuỗi và đại diện cho một hoặc nhiều tên lớp (được phân tách bằng dấu cách) được thêm vào thuộc tính lớp của mỗi phần tử được so khớp.

3

options

Điều này đại diện cho tất cả các cài đặt hoạt ảnh. Tất cả các thuộc tính là tùy chọn. Giá trị có thể là -

  • duration- Một chuỗi hoặc số xác định hoạt ảnh sẽ chạy trong bao lâu .. Giá trị mặc định của nó là 400 .

  • easing- Một chuỗi cho biết hàm nới lỏng nào được sử dụng cho quá trình chuyển đổi. Giá trị mặc định của nó là swing . Giá trị có thể có ở đây .

  • complete - Đây là phương thức gọi lại được gọi cho từng phần tử khi hiệu ứng hoàn tất cho phần tử này.

  • children - Đây là Boolean và biểu thị liệu hoạt ảnh có nên được áp dụng bổ sung cho tất cả các phần tử con của các phần tử đã khớp hay không.

  • queue - Đây là kiểu String / Boolean cho biết có nên đặt hoạt ảnh trong hàng đợi hiệu ứng hay không ..

Ví dụ

Ví dụ sau minh họa việc sử dụng phương thức 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML switchclassexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Nhấp vào nút Switch Class để xem ảnh hưởng của các lớp trên hộp.