Câu hỏi Tab giao diện người dùng JQuery - Thông báo “Đang tải…”


Tất cả các,

Tôi đang sử dụng các tab lồng nhau của giao diện người dùng Jquery. Tôi chỉ tự hỏi nếu có bất kỳ cách nào để hiển thị một hình ảnh AJAX Spinner bên cạnh văn bản tab, trong khi tab đang tải. Tôi không muốn thay đổi văn bản tab thành "Đang tải ..". Hãy xem xét rằng khi nhiều tab đang tải cùng một lúc hoặc cái kia, hình ảnh spinner sẽ được hiển thị bên cạnh mỗi tab tải.

Bất kỳ đề xuất?

Cảm ơn


25
2017-11-13 16:03


gốc




Các câu trả lời:


Nếu bạn đang sử dụng bộ nhớ đệm cho các tab của mình thì giải pháp này phù hợp hơn, nó chỉ hiển thị tải ajax nếu nội dung chưa có trên trang.

$(".tabs").tabs({
   cache:true,
   load: function (e, ui) {
     $(ui.panel).find(".tab-loading").remove();
   },
   select: function (e, ui) {
     var $panel = $(ui.panel);

     if ($panel.is(":empty")) {
         $panel.append("<div class='tab-loading'>Loading...</div>")
     }
    }
 })

39
2017-12-02 09:13



Đó là một bài viết thực sự hữu ích, cảm ơn. Tôi thấy thật kỳ lạ khi giao diện người dùng jQ 1.8 trims bất kỳ nội dung HTML nào bên trong hàm, nhưng tôi chỉ thực sự cần một tin nhắn. - Echilon
nó mát mẻ, nhưng bằng cách nào đó nó không hoạt động cho tab đầu tiên được chọn tự động. Tôi đã làm việc nó xung quanh bằng cách chèn div bằng tay và hơn, mã của bạn loại bỏ nó. - m1k3y3
phiên bản mới hơn của giao diện người dùng jQ (hiện tại tôi đang sử dụng 1.11) không có select biến cố. sử dụng beforeLoad thay thế. điều này cũng trả lời những gì @ m1k3y3 phải đối mặt (không hoạt động trên tab đầu tiên) vì AFAIK select bằng với activate trong phiên bản mới hơn và tab đầu tiên được kích hoạt tự động - blackbiron


Tôi đã sử dụng một phương pháp khác cho chính bản thân mình. Tôi muốn các tiêu đề tab vẫn như cũ và có thông tin 'tải' trong chính tab đó.

Cách tôi đã làm như sau:

    $("#matchTabs").tabs({
      spinner: "",
      select: function(event, ui) {
        var tabID = "#ui-tabs-" + (ui.index + 1);
        $(tabID).html("<b>Fetching Data.... Please wait....</b>");
      }
    });

Giống như áp phích trước, tôi đã sử dụng phương pháp spinner để ngăn tiêu đề tab bị thay đổi. Sự kiện chọn sẽ kích hoạt khi một tab mới được chọn, vì vậy tôi nhận được ID của tab hiện đang được chọn và thêm một thẻ để tạo biến có thể tham chiếu DIV mà nội dung ajax được tải theo mặc định.

Khi bạn có ID, tất cả những gì bạn cần làm là thay thế HTML bên trong DIV bằng thông báo tải của bạn. Khi Ajax hoàn thành, nó sẽ thay thế nó một lần nữa cho bạn với nội dung thực tế.


8
2018-05-13 12:50





Balu, gần đây tôi cần một cái gì đó tương tự. Trong dự án của tôi, tôi muốn các tab giữ lại tiêu đề tab, nhưng gắn thêm một hoạt ảnh kiểu tải ajax. Đây là những gì tôi đã sử dụng:

$(".tabs").tabs({ spinner: '',
                select: function(event, ui) { 
                    $(".tabs li a .loader").remove();
                    $(".tabs li a").eq(ui.index).append("<span class='loader'><img src='images/ajax-loader.gif'/></span>"); 
                    },
                load: function(event, ui) { $(".tabs li a").eq(ui.index).find(".loader").remove(); }
                });

Tùy chọn "spinner" loại bỏ hiệu ứng "Đang tải ..." khi nhấp vào tab. Sự kiện "chọn" cho phép chúng tôi nhận tab đã chọn và nối thêm một khoảng mới chứa hoạt ảnh. Khi nội dung đã tải, chúng tôi sử dụng sự kiện "tải" để xóa hoạt ảnh. Để ngăn nhiều nhấp chuột của người dùng hủy các tab, chúng tôi xóa () tất cả các hoạt ảnh trên bất kỳ tab nào được chọn.

Bạn đã giải quyết vấn đề này chưa? Nếu có, vui lòng chia sẻ giải pháp.


5
2017-12-18 14:56



hello .... nó đã không làm việc cho tôi, mặc dù logic ur là âm thanh .. có thể là một cái gì đó sai với bộ chọn .. dưới đây sol làm việc .. nhờ chia sẻ - bsr


Trong jQuery UI v1.12, bạn có thể sử dụng trình xử lý beforeLoad:

$('#tabs').tabs({                
beforeLoad: function(event, ui) {
    ui.panel.html('Loading')
}
});

2
2018-04-01 16:45