JQuery UI选项卡 – “正在加载…”消息
所有，
我正在使用Jquery UI嵌套选项卡。 我只是想知道是否有任何方法在选项卡文本旁边显示AJAX Spinner图像，同时加载选项卡。 我不想将标签文本更改为“正在加载…”。 考虑到当多个选项卡同时加载或一个接一个加载时，微调器图像应显示在每个加载选项卡旁边。
有什么建议？
谢谢
如果您正在为选项卡使用缓存，那么此解决方案可能更适合，如果内容尚未在页面上，则仅显示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("Loading...") } } }) 我自己用了不同的方法。 我希望标签标题保持原样，并在标签本身中显示“加载”信息。
我这样做的方式如下：
$("#matchTabs").tabs({ spinner: "", select: function(event, ui) { var tabID = "#ui-tabs-" + (ui.index + 1); $(tabID).html("Fetching Data.... Please wait...."); } });
与上一张海报一样，我使用了微调器方法来防止标签标题被更改。 选择新选项卡时会触发select事件，因此我获得了当前所选选项卡的ID，并添加了一个用于创建一个变量，该变量将引用默认情况下加载ajax内容的DIV。
获得ID后，您需要做的就是用加载消息替换DIV中的HTML。 当Ajax完成时，它将使用实际内容再次替换它。
巴鲁，我最近需要类似的东西。 在我的项目中，我希望选项卡保留选项卡标题，但附加一个ajax加载类型的动画。 这是我用过的：
$(".tabs").tabs({ spinner: '', select: function(event, ui) { $(".tabs li a .loader").remove(); $(".tabs li a").eq(ui.index).append("
"); }, load: function(event, ui) { $(".tabs li a").eq(ui.index).find(".loader").remove(); } });
“微调器”选项会在单击选项卡时删除“加载…”效果。 “select”事件允许我们获取选定的选项卡并附加包含动画的新范围。 内容加载后，我们使用“加载”事件来删除动画。 为了防止多个用户点击销毁标签，我们删除（）任何标签选择上的所有动画。
你已经解决了这个问题吗？ 如果是这样，请分享解决方案。
在jQuery UI v1.12中，您可以使用beforeLoad Handler：
$('#tabs').tabs({ beforeLoad: function(event, ui) { ui.panel.html('Loading') } });