Question

所有

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

任何建议？

由于

Answer 1

如果您正在为标签使用缓存，那么此解决方案可能更合适，只有在内容不在页面上时才会显示ajax加载。

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

与上一张海报一样，我使用了微调器方法来防止标签标题被更改。选择新选项卡时会触发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(); }
                });

“spinner”选项会在单击选项卡时删除“Loading ...”效果。 “select”事件允许我们获取选定的选项卡并附加包含动画的新范围。内容加载后，我们使用“加载”事件来删除动画。为防止多次用户点击破坏标签，我们删除（）任何标签选择上的所有动画。

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

Answer 4

在jQuery UI v1.12中，您可以使用beforeLoad Handler：

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

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

4 个答案: