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

【问题标题】：JQuery UI Tabs - Spinner Background ImageJQuery UI 选项卡 - 微调器背景图像
【发布时间】：2009-11-11 17:41:37
【问题描述】：

全部，

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

谢谢

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

这似乎不起作用，除非您正在处理通过 Ajax 加载数据的选项卡？

【解决方案2】：

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

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

$('#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。但是，这会淡入/淡出标题和微调器。

【讨论】：

【解决方案3】：

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

【讨论】：

这几乎肯定是可能的。如果您想深入研究源代码并对其进行更改，请随意，但是，这意味着您无法在发布时更新到最新版本，除非您计划将所有更改与他们的更改合并。我通常觉得最好看看你是否可以在不接触他们的代码的情况下扩展他们的系统。