JQueryUI Tab – The Uncola

Lets say you are using knockoutjs , so your tabs might look something like this in your form data.

< div id=”tabs” data-bind=”jqTabs: { fx: { opacity: ‘toggle’ } }”>
< ul>
{{each tabs}}
< ul>
< li>< a href=”#tab-${id}” data-bind=”click: function(event,ui) {$root.ClickedTab(event,ui);}”>${title}
< /li>< /ul>

Handling the screen interaction is what I am interested in.

Such as the Tab  events.  Getting what was selected .

The  JQueryUI tabs documentation  lists Methods , Events, Options

For example, under methods,

tabsselect, tabsload, tabsadd

selected: Get or set the selected option, after init.-
var selected = $( ".selector" ).tabs( "option", "selected" );
$('#tabs').tabs("option", "selected")
$('#tabs').data()

$('#tabs').tabs({
        selected: selection.parent().index(),
    });
 

As well the live demos under contents feature information :

Events

A series of events fire when interacting with a tabs interface:

• tabsselect, tabsload, tabsshow (in that order)
• tabsadd, tabsremove
• tabsenable, tabsdisable

Event binding example:

$('#example').bind('tabsselect', 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

});

tab fiddle  , tab jsbin , tabs stackoverflow