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