Jquery UI Tabs: Help getting started with events

Question

I've read through the documentation for Jquery UI Tabs (1.7) and I believe I'm a bit in over my head with the Jquery tabs in terms of having specific events happen when a specific tab is clicked.

I have the basic tabs working, and I would simply like to set the focus on a text box when a specific tab is selected.

The UI Docs state you handle select events via:

$('.selector').tabs({
   select: function(event, ui) { ... }
});

I'm not exactly sure what the above means. I've read through a few other examples here at stackoverflow, specficially example. Unfortunately the demo no longer works in the supplied answer.

My Current code for creating and selecting a specific tab using PHP is:

$("#tabs").tabs();
$("#tabs").tabs('option', 'selected', <?php echo $tabID-1; ?>);

Which works fine. I would like to add the ability for when the 4th tab is selected, I set the focus to a text box, something similiar to:

$('#subject').focus();

Answer 1

What you do is to give the $('.selector').tabs() function an associative array (in JavaScript it is just called object). It is important, that JavaScript is using the fact, that you can assign functions to variables very extensively. If it is easier for you to read and understand you can try this:

var tab_select_function = function(event, ui)
{
    // Objects available in the function context:
    // ui.tab     // anchor element of the selected (clicked) tab
    // ui.panel   // element, that contains the selected/clicked tab contents
    // ui.index   // zero-based index of the selected (clicked) tab
    alert("Tab with index " + ui.index + " clicked!");
};

$('#tabs').tabs({
   select: tab_select_function
});