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