All,
I am using Jquery UI nested tabs. I was just wondering if there is any way to display an AJAX Spinner image next to the tab text, while the tab is loading. I do not want to change the tab text to "Loading..". Consider that when multiple tabs are loading at the same time or one after the other, the spinner image should be displayed next to each loading tab..
Any Suggestions?
Thanks
Balu, I recently needed to something similar. In my project, I wanted the tabs to retain the tab title, but append an ajax-loading type animation. Here is what I used:
$(".tabs").tabs({ spinner: '',
select: function(event, ui) {
$(".tabs li a .loader").remove();
$(".tabs li a").eq(ui.index).append("<span class='loader'><img src='images/ajax-loader.gif'/></span>");
},
load: function(event, ui) { $(".tabs li a").eq(ui.index).find(".loader").remove(); }
});
The "spinner" option removes the "Loading..." effect on click of the tab. The "select" event allows us to get the selected tab and append a new span containing the animation. Once the content has loaded we use the "load" event to remove the animation. To prevent multiple user clicks from destroying the tabs, we remove() all animations on any tab select.
Did you already solve this issue? If so, please share the solution.