JqueryUI - Chuyển đổi lớp

Chương này sẽ thảo luận về toggleClass()phương thức, là một lớp mới hữu ích để thao tác. Phương thức toggleClass () thêm hoặc xóa một hoặc nhiều lớp khỏi mỗi phần tử trong tập hợp các phần tử đã so khớp.

Cú pháp

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

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

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
Sr.No. Mô tả về Thông Số
1

className

Đâ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ẽ được thêm, xóa hoặc chuyển đổi.

2

switch

Đây là kiểu Boolean và nếu được chỉ định, buộc phương thức toggleClass () phải thêm lớp nếu đúng hoặc loại bỏ lớp nếu sai .

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.

.toggleClass( className [, switch ] [, options ] )
Sr.No. Mô tả về Thông Số
1

className

Đâ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ẽ được thêm, xóa hoặc chuyển đổi.

2

switch

Đây là kiểu Boolean và nếu được chỉ định, buộc phương thức toggleClass () phải thêm lớp nếu đúng hoặc loại bỏ lớp nếu sai .

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 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML toggleclassexample.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 Toggle để xem các lớp CSS được thay đổi như thế nào cho văn bản.