JIQuery UI Tab - Spinner Background Image

Question

Everything,

I am using jQuery user interface tabs. When a click is clicked, I want the tab to display a tab header along with an animated gif clip next to it. When the tab is loaded, the image should be hidden. 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.   required for the correct display of the counter and .

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

Answer 2

Firstly, I would highly recommend creating a spinner gif from http://www.ajaxload.info/ , as they have really great ones.

Further, if you look at the documentation for the tabs of the JQuery interface, you will notice that you can set up a function that will be called at different Events. For example, you can use the select and load events to display it (although I'm not sure how to put it inside the tab, I will leave this 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 counter and header in the same range, you will need to replace #my_spinner_tab_1 with #my_span_tab_1 or whatever you decide to use. However, this can lead to the disappearance of both the header and the counter.

Answer 3

Is it impossible to change the part of ui.tabs.min.js → "spinner" to keep the tab name and include the spinner background image?