jquery - JQuery UI 选项卡 - 微调器背景图像

Question

全部，

我正在使用 JQuery UI 选项卡。单击选项卡时，我希望该选项卡显示选项卡标题以及旁边的微调器动画 gif。加载选项卡时，图像应该隐藏。我怎样才能做到这一点？

谢谢

Answer 1

将微调器选项添加到tabs()

$("#tabs").tabs({
    spinner: '<img src="whatever.gif" />'
});

<span>&nbsp;</span>在<a></a>每个选项卡中添加。 微调器正确出现和消失是必需的。

<li><a href="urlheretoajaxload">Text Title<span>&nbsp;</span></a></li>

Answer 2

首先，我强烈建议从http://www.ajaxload.info/生成微调器 gif，因为他们有一些非常棒的免费的。

接下来，如果您查看 JQuery UI 选项卡的文档，您会注意到您可以设置一个函数以在不同的事件上调用。例如，您可以使用selectandload事件来显示它（虽然我不确定如何将它放在选项卡中，但我会留给您）：

$('#my_tabbed_area').tabs({
  select: function(event, ui) { $('#my_spinner_tab_1').fadeIn() },
  load:   function(event, ui) { $('#my_spinner_tab_1').fadeOut() }
});

如果您可以将微调器和标题放在同一个跨度中，那么您需要替换#my_spinner_tab_1为#my_span_tab_1或您选择使用的任何 id。但是，这会淡入/淡出标题和微调器。

Answer 3

是否无法修改 ui.tabs.min.js -> "spinner" 部分以保留选项卡名称并包含背景微调器图像？