全部,
我正在使用 JQuery UI 选项卡。单击选项卡时,我希望该选项卡显示选项卡标题以及旁边的微调器动画 gif。加载选项卡时,图像应该隐藏。我怎样才能做到这一点?
谢谢
全部,
我正在使用 JQuery UI 选项卡。单击选项卡时,我希望该选项卡显示选项卡标题以及旁边的微调器动画 gif。加载选项卡时,图像应该隐藏。我怎样才能做到这一点?
谢谢
将微调器选项添加到tabs()
$("#tabs").tabs({
spinner: '<img src="whatever.gif" />'
});
<span> </span>
在<a></a>
每个选项卡中添加。
微调器正确出现和消失是必需的。
<li><a href="urlheretoajaxload">Text Title<span> </span></a></li>
首先,我强烈建议从http://www.ajaxload.info/生成微调器 gif,因为他们有一些非常棒的免费的。
接下来,如果您查看 JQuery UI 选项卡的文档,您会注意到您可以设置一个函数以在不同的事件上调用。例如,您可以使用select
andload
事件来显示它(虽然我不确定如何将它放在选项卡中,但我会留给您):
$('#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。但是,这会淡入/淡出标题和微调器。
是否无法修改 ui.tabs.min.js -> "spinner" 部分以保留选项卡名称并包含背景微调器图像?