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/生成spinner gif,因为它们有一些非常棒的免费赠送.

接下来,如果您查看JQuery UI选项卡的文档,您将注意到您可以设置要在不同事件上调用的函数.例如,你可以使用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.但是,这会淡化/淡出标题和微调器.