JqueryUI - Ẩn
Chương này sẽ thảo luận về hide(), là một trong những phương pháp được sử dụng để quản lý hiệu ứng hình ảnh jQueryUI. Phương thức effect () áp dụng hiệu ứng hoạt hình để ẩn các phần tử.
Cú pháp
Các hide() phương thức có cú pháp sau:
.hide( effect [, options ] [, duration ] [, complete ] )| Sr.No. | Mô tả về Thông Số |
|---|---|
| 1 | effect Đây là một Chuỗi cho biết hiệu ứng nào sẽ sử dụng cho quá trình chuyển đổi. |
| 2 | options Đây là kiểu Object và chỉ ra các thiết lập hiệu ứng cụ thể và nới lỏng . Ngoài ra, mỗi hiệu ứng có bộ tùy chọn riêng có thể được chỉ định chung cho nhiều hiệu ứng được mô tả trong bảng Hiệu ứng jQueryUI . |
| 3 | duration Đây là loại Number hoặc String và cho biết số phần nghìn giây của hiệu ứng. Giá trị mặc định của nó là 400 . |
| 4 | 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. |
Hiệu ứng jQueryUI
Bảng sau đây mô tả các hiệu ứng khác nhau có thể được sử dụng với phương thức hide () :
| Sr.No. | Hiệu ứng & Mô tả |
|---|---|
| 1 | blind Hiển thị hoặc ẩn phần tử theo cách của màn che cửa sổ: bằng cách di chuyển cạnh dưới lên hoặc xuống, hoặc cạnh phải sang phải hoặc trái, tùy thuộc vào hướng và chế độ được chỉ định . |
| 2 | bounce Làm cho phần tử xuất hiện nảy theo hướng dọc hoặc ngang, tùy chọn hiển thị hoặc ẩn phần tử. |
| 3 | clip Hiển thị hoặc ẩn phần tử bằng cách di chuyển các đường viền đối diện của phần tử lại với nhau cho đến khi chúng gặp nhau ở giữa hoặc ngược lại. |
| 4 | drop Hiển thị hoặc ẩn phần tử bằng cách làm cho phần tử có vẻ như thả vào hoặc thoát ra khỏi trang. |
| 5 | explode Hiển thị hoặc ẩn phần tử bằng cách chia nó thành nhiều phần di chuyển theo các hướng xuyên tâm như thể phát nổ vào hoặc phát nổ từ trang. |
| 6 | fade Hiển thị hoặc ẩn phần tử bằng cách điều chỉnh độ mờ của phần tử. Điều này cũng giống như các hiệu ứng mờ dần cốt lõi, nhưng không có tùy chọn. |
| 7 | fold Hiển thị hoặc ẩn phần tử bằng cách điều chỉnh các đường viền đối diện trong hoặc ngoài, sau đó thực hiện tương tự đối với tập hợp các đường viền khác. |
| số 8 | highlight Thu hút sự chú ý đến phần tử bằng cách thay đổi ngay màu nền của nó trong khi hiển thị hoặc ẩn phần tử. |
| 9 | puff Mở rộng hoặc thu nhỏ phần tử tại chỗ trong khi điều chỉnh độ mờ của nó. |
| 10 | pulsate Điều chỉnh độ mờ của phần tử bật và tắt trước khi đảm bảo rằng phần tử được hiển thị hoặc ẩn như đã chỉ định. |
| 11 | scale Mở rộng hoặc thu nhỏ phần tử theo một tỷ lệ phần trăm cụ thể. |
| 12 | shake Lắc phần tử qua lại, theo chiều dọc hoặc chiều ngang. |
| 14 | size Thay đổi kích thước phần tử thành chiều rộng và chiều cao được chỉ định. Tương tự như quy mô ngoại trừ cách kích thước mục tiêu được chỉ định. |
| 15 | slide Di chuyển phần tử sao cho phần tử có vẻ như trượt lên hoặc ra khỏi trang. |
| 16 | transfer Hoạt ảnh một phần tử phác thảo tạm thời làm cho phần tử dường như chuyển sang phần tử khác. Sự xuất hiện của phần tử phác thảo phải được xác định thông qua các quy tắc CSS cho lớp ui-Effects-transfer, hoặc lớp được chỉ định dưới dạng tùy chọn. |
Ví dụ
Các ví dụ sau minh họa việc sử dụng phương thức hide () với các hiệu ứng khác nhau được liệt kê trong bảng trên.
Hiệu ứng - Mù
Ví dụ sau cho thấy việc sử dụng phương thức hide () với hiệu ứng mù . Bấm vào nút Blind Effect Hide để xem hiệu ứng mù trước khi phần tử ẩn đi.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI hide 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>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
function runEffect() {
$( "#effect" ).hide( "blind", {times: 10, distance: 100}, 1000, callback );
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
$( "#button" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class = "toggler">
<div id = "effect" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Hide</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
</div>
</div>
<a href = "#" id = "button" class = "ui-state-default ui-corner-all">Blind Effect Hide</a>
</body>
</html>Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML hideexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -
Hiệu ứng - Lắc
Ví dụ sau cho thấy việc sử dụng phương thức lắc () với hiệu ứng mù . Bấm vào nút Shake Effect Hide để xem hiệu ứng lắc trước khi phần tử ẩn đi.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI hide 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>
.toggler-1 { width: 500px; height: 200px; }
#button-1 { padding: .5em 1em; text-decoration: none; }
#effect-1 { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
function runEffect() {
$( "#effect-1" ).hide( "shake", {times: 10, distance: 100}, 1000, callback );
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect-1" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// set effect from select menu value
$( "#button-1" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class = "toggler-1">
<div id = "effect-1" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Hide</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
</div>
</div>
<a href = "#" id = "button-1" class = "ui-state-default ui-corner-all">Shake Effect Hide</a>
</body>
</html>Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML hideexample.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ả -