jquery - JQuery UI 选项卡 - “正在加载...”消息

Question

全部，

我正在使用 Jquery UI 嵌套选项卡。我只是想知道是否有任何方法可以在选项卡加载时在选项卡文本旁边显示 AJAX Spinner 图像。我不想将选项卡文本更改为“正在加载..”。考虑当多个选项卡同时加载或一个接一个加载时，微调器图像应显示在每个加载选项卡旁边。

有什么建议么？

谢谢

Answer 1

If you're using caching for your tabs, then this solution is propably a better fit, it only shows the ajax loading if the content isn't already on the page.

$(".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>")
     }
    }
 })

Answer 2

我自己使用了不同的方法。我希望标签标题保持原样，并在标签本身中包含“加载”信息。

我这样做的方式如下：

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

和之前的海报一样，我使用了 spinner 方法来防止标签标题被更改。选择新选项卡时会触发 select 事件，因此我获取了当前选定选项卡的 ID，并添加了一个以创建一个变量，该变量将引用默认加载 ajax 内容的 DIV。

获得 ID 后，您需要做的就是将 DIV 中的 HTML 替换为加载消息。当 Ajax 完成时，它将再次为您替换为实际内容。

Answer 3

巴鲁，我最近需要类似的东西。在我的项目中，我希望选项卡保留选项卡标题，但附加一个 ajax 加载类型动画。这是我使用的：

$(".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(); }
                });

“微调器”选项消除了单击选项卡时的“加载...”效果。“选择”事件允许我们获取选定的选项卡并附加一个包含动画的新跨度。加载内容后，我们使用“加载”事件来删除动画。为了防止多个用户单击破坏选项卡，我们 remove() 任何选项卡选择上的所有动画。

你已经解决了这个问题吗？如果是这样，请分享解决方案。

Answer 4

在 jQuery UI v1.12 中，您可以使用 beforeLoad 处理程序：

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