Tôi tương đối mới đối với jQuery và phát triển web.Tab jQuery - Chỉ tải nội dung khi được nhấp
Tôi đang sử dụng tab giao diện người dùng jQuery để tạo tab.
Nhưng tôi muốn nội dung chỉ được tải khi tôi chọn một tab cụ thể.
OK, tôi giả sử khi người dùng nhấp vào tab, bạn định tìm nạp nội dung động qua AJAX. Điều này thực sự liên quan đến hai điều, đặt onclick ngay cả đối với tab của bạn và tìm nạp dữ liệu qua ajax.
Thiết lập một sự kiện onclick
Cho tab của bạn một lớp, ví dụ my_tab. Giả sử khi người dùng nhấp vào tab bạn muốn chức năng handle_tab_click() kích hoạt. Dưới đây là một ví dụ về ràng buộc sự kiện onclick-my_tab bạn tab:
$(".my_tab").bind("click", handle_tab_click);
handle_tab_click của bạn() chức năng sẽ được cung cấp một kiện lập luận mà sẽ có thể cung cấp cho bạn thông tin về phần tử đã kích hoạt sự kiện (trong trường hợp này, phần tử có tên lớp là my_tab).
function (event) {
if ($(event.target).hasClass("my_tab")) { /* handle tab click */ }
if ($(event.target).hasClass("my_tab_2")) { /* a different tab click */ }
if ($(event.target).hasClass("my_tab_3")) { /* ... */ }
}
Xem JQuery kiện tài liệu hướng dẫn để biết thêm chi tiết here.
Tìm nạp các dữ liệu thông qua ajax
dữ liệu tìm nạp sẽ yêu cầu bạn phải gọi một kịch bản từ xa trong khi cung cấp thông tin về những tab được nhấp (theo thứ tự để lấy các thông tin phù hợp). Trong đoạn mã sau, chúng tôi đang gọi tập lệnh từ xa myscript.php, cung cấp đối số HTTP GET tab_clicked = my_tab và gọi hàm tab_fetch_cb khi tập lệnh trả về. Thông số cuối cùng là loại dữ liệu được trả lại (tùy thuộc vào bạn chọn).
$.get("myscript.php", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml")
Đó là tùy thuộc vào bạn để thiết kế myscript.php để xử lý các tab_clicked tham số, lấy dữ liệu thích hợp và gửi lại (ví dụ: viết nó trở ra cho khách hàng).
Dưới đây là một ví dụ cho tab_fetch_cb:
function tab_fetch_cb(data, status) {
// populate your newly opened tab with information
// returned from myscript.php here
}
Bạn có thể đọc thêm về JQuery được chức năng here, và chức năng ajax JQuery here
Tôi xin lỗi tôi không thể cụ thể hơn trong các ví dụ của tôi, nhưng rất nhiều việc xử lý thực sự phụ thuộc vào nhiệm vụ của bạn. Có vẻ như nó đã được chỉ ra, bạn có thể xem xét một số plugin JQuery cho một giải pháp đóng hộp cho vấn đề của bạn. Điều đó đang được nói, nó không bao giờ đau để tìm hiểu làm thế nào để làm công cụ này bằng tay w/JQuery.
Chúc may mắn.
Tải nội dung qua Ajax thêm độ phức tạp của việc xử lý các nút đánh dấu trang/trình duyệt trở lại. Tùy thuộc vào tình huống của bạn, bạn nên xem xét tải nội dung mới với yêu cầu toàn bộ trang. Xử lý việc đánh dấu trang/trình duyệt lại liên quan đến việc sử dụng thêm thông tin neo trong URL.
Ngoài ra, hãy xem LavaLamp để chọn tab. Nó trông khá tiện lợi.
Liên kết đó đến 'lavalamp' cung cấp thông điệp nguy hiểm trong virusscanner của tôi. – UnderDog
Theo mặc định, tiện ích tab sẽ trao đổi giữa các phần được gắn thẻ trên Click, nhưng các sự kiện có thể được thay đổi thành onHover thông qua một tùy chọn. Nội dung tab có thể được tải qua Ajax bằng cách đặt một href trên một tab.
Nếu bạn đang sử dụng Rails, bạn có thể thử ngọc này bettertabs
Nó hỗ trợ các tab ajax.
Dễ dàng hơn khi sử dụng plugin Tab của giao diện người dùng jQuery. Xem bình luận của CMS dưới đây. – rboarman