JQuery UI Tabs - Spinner Background Image

Question

All,

I am using JQuery UI tabs. When a tab is clicked, I want the tab to show the tab title along with a spinner animated gif next to it. When the tab is loaded, the image should hide. How can I achieve this?

Thanks

Answer 1

Add spinner option to tabs()

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

Add <span>&nbsp;</span> within <a></a> for each tab.   is required for the spinner to properly appear and disappear.

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

Answer 2

Firstly, I would highly recommend generating the spinner gif from http://www.ajaxload.info/ as they have some really great ones for free.

Next, if you look at the documentation for JQuery UI Tabs, you'll note that you can setup an function to be called on different events. For instance, you could use the select and load events to display it (although I'm not sure how to put it inside of the tab, I'll leave that up to you):

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

If you can put the spinner and the title in the same span, then you would need to replace #my_spinner_tab_1 with #my_span_tab_1 or whatever id you choose to use. However, this would fade in/out both the title and the spinner.