Thứ Sáu, 7 tháng 3, 2014
jQuery Hide/Show
«Trở lại
Chương tiếp theo »
Ẩn, Show, Chuyển đổi, Slide, Fade, và Animate. WOW!
jQuery hide () và show ()
Với jQuery, bạn có thể ẩn và hiển thị các phần tử HTML với hide () và () phương pháp hiển thị:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Thử nó cho mình »
Cú pháp:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).show(speed,callback);
Các thông số tốc độ tùy chọn xác định tốc độ của các ẩn / hiển thị, và có thể mất các giá trị sau: "chậm", "nhanh", hoặc mili giây.
Các tham số gọi lại tùy chọn là một chức năng được thực hiện sau khi hide () hoặc show () phương pháp hoàn thành (bạn sẽ tìm hiểu thêm về chức năng gọi lại trong một chương sau).
Ví dụ sau đây cho thấy các thông số tốc độ hide ():
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
Thử nó cho mình »
jQuery toggle ()
Với jQuery, bạn có thể chuyển đổi giữa các () phương pháp với phương pháp () chuyển đổi hide () và show.
Các yếu tố thể hiện được ẩn và các yếu tố tiềm ẩn được hiển thị:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
Thử nó cho mình »
Cú pháp:
$(selector).toggle(speed,callback);
Các thông số tốc độ tùy chọn có thể mất các giá trị sau: "chậm", "nhanh", hoặc mili giây.
Các tham số gọi lại tùy chọn là một chức năng được thực hiện sau khi chuyển đổi () hoàn tất.
«Trở lại
Chương tiếp theo »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét