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

Question

全部，

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

任何建议？

谢谢

Answer 1

巴鲁，我最近需要类似的东西。在我的项目中，我希望标签保留标签标题，但附加一个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(); } 
       }); 

“微调”选项删除“加载...”效果点击标签。 “选择”事件允许我们获取选定的选项卡并追加一个包含动画的新跨度。内容加载完成后，我们使用“加载”事件删除动画。为了防止多个用户点击销毁标签，我们删除（）所有选项卡上的动画。

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

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({ 
    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 4

在jQuery UI的V1.12可以使用beforeLoad处理程序：

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