Simple question about jquery ui tab: show callback

Question

Hi,

I have a very simple question (not simple for me).

I want to run a javascript function on my page, but only when a tab is shown.

Well I actually have two questions. I am not using ajax tabs, so would I put my javscript in the 'load' or 'show' callback, if I only want the code to run once the tab is shown.

Depending on the answer above, what would my code look like to accomplish the following:

I want to have it like this when tab 1 is shown/loaded -->insert javscript here when tab2 is shown/loaded -->insert different javascript here when tab3 is shown/loaded -->insert different javascript here etc, etc.

Answer 1

just a quick guess:

$('#foo').tabs({
    onShow: function(event, ui) {
        if(ui.index == 0)
        {
         //tab 1 is clicked
        }
        else if(ui.index == 1)
        {
         //tab 2 is clicked
        }
        else if(ui.index == 2)
        {
         //tab 3 is clicked
        }
    }
});

You could also use a switch instead of the else ifs :)

Answer 2

I've tried to use the above to control the speed of rotation of the tabs but with no luck, any ideas?

$('#featured').tabs({
    onShow: function(event, ui) {
        if(ui.index == 0)>
        {
         $('#featured').tabs("rotate", 2000, true);
        }
        else if(ui.index == 1)
        {
         $('#featured').tabs("rotate", 5000, true);
        }
        else if(ui.index == 2)
        {
         $('#featured').tabs("rotate", 10000, true);
        }
    }
});