Question

所有

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

由于

Answer 1

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

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

在<span> </span>内为每个标签添加<a></a>。微调器需要 才能正确显示和消失。

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

Answer 2

首先，我强烈建议从http://www.ajaxload.info/生成spinner 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。但是，这会淡化/淡出标题和微调器。

Answer 3

是否无法修改ui.tabs.min.js - ＆gt; “spinner”部分用于保留选项卡名称并包含背景微调器图像？

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

3 个答案: