A Techno Blog, mainly about Java

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 , EventsOptions

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")

        selected: selection.parent().index(),

As well the live demos under contents feature information :


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:     // 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

August 15, 2012 Posted by | Uncategorized | , | Leave a comment