Phương thức toggle[] trong jQuery
Để dễ dàng tiếp thu bài hướng dẫn này thì trước tiên bạn cần xem qua:
- Phương thức hide[] trong jQuery
- Phương thức show[] trong jQuery
1] Phương thức toggle[] trong jQuery
- Phương thức toggle[] dùng để thực hiện luân phiên giữa việc hiện & ẩn một phần tử.
- Ví dụ: Khi bạn bấm vào nút , nếu phần tử bên dưới đang hiện thì nó sẽ bị ẩn đi, còn nếu phần tử bên dưới đang bị ẩn thì nó sẽ được hiện lên.
- Lưu ý:
- Một phần tử bị ẩn bởi phương thức toggle[] thì cũng tương tự như việc phần tử đó được thiết lập thuộc tính display với giá trị none trong CSS.
- Phương thức toggle[] chỉ có thể hiển thị những phần tử bị ẩn bởi thuộc tính display:none chứ không có tác dụng với phần tử bị ẩn bởi thuộc tính visibility:hidden trong CSS.
2] Cách sử dụng phương thức toggle[] trong jQuery
- Để sử dụng phương thức toggle[], ta dùng cú pháp như sau:$[selector].toggle[time,speed,callback];
- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong phương thức toggle[]: Tham số Yêu cầu Mô tả ý nghĩa & cách sử dụng time Không bắt buộc
- Chỉ định khoảng thời gian mà phần tử bắt đầu được hiện [ẩn] cho đến khi hiện [ẩn] hoàn toàn.
- Tham số này có thể được xác định bởi một trong ba loại giá trị:
- số mili giây cụ thể
- "slow"
- "fast"
- Lưu ý: Mặc định thì khoảng thời gian mà phần tử bắt đầu được hiện [ẩn] cho đến khi hiện [ẩn] hoàn toàn là 400 mili giây. speed Không bắt buộc
- Chỉ định tốc độ hiện [ẩn] phần tử ở những thời điểm khác nhau.
- Tham số này có thể được xác định bởi một trong hai loại giá trị:
- "swing" - chậm ở đoạn đầu & cuối, nhanh ở đoạn giữa.
- "linear" - tốc độ không đổi.
- Lưu ý: Mặc định thì tốc độ hiện [ẩn] phần tử là không đổi ["swing"] callback Không bắt buộc - Một hàm callback sẽ được thực thi sau khi phương thức toggle[] đã được thực thi hoàn tất.
3] Một số ví dụVí dụ 1:
$[document].ready[function[]{ $["button"].click[function[]{ $["div"].toggle[]; }]; }]; Xem ví dụ Ví dụ 2:
$[document].ready[function[]{ $["button"].click[function[]{ $["div"].toggle[5000]; }]; }]; Xem ví dụ Ví dụ 3:
$[document].ready[function[]{ $["button"].click[function[]{ $["div"].toggle[5000,"linear"]; }]; }]; Xem ví dụ Ví dụ 4:
$[document].ready[function[]{ $["button"].click[function[]{ $["div"].toggle[5000,"linear",function[]{ alert["Hello jQuery"]; }]; }]; }]; Xem ví dụ Bài 01: Tìm hiểu tổng quan về jQuery Bài 02: jQuery Syntax Bài 03: jQuery Selectors Bài 04: Cách hiện và ẩn một phần tử Bài 05: Cách hiện và ẩn một phần tử [với hiệu ứng phai màu] Bài 06: jQuery Callback Bài 07: Cách hiện và ẩn một phần tử [với hiệu ứng trượt] Bài 08: jQuery Animate Bài 09: Phương thức Stop[] Bài 10: jQuery Get Bài 11: jQuery Remove Bài 12: jQuery CSS Classes Bài 13: jQuery Ancestors jQuery Selectors [tất cả bộ chọn trong jQuery] jQuery Event [tất cả sự kiện trong jQuery] jQuery Methods [các phương thức cơ bản trong jQuery] jQuery HTML/CSS [các phương thức dùng để xử lý HTML/CSS trong jQuery]