jQuery UI Tabs Callbacks

Somehow the jquery ui tabs callbacks as described on the website (and as described here) don't seem to work for me. So I took a look at the source code and this is how I got them to work:

$("#tabbook > ul").tabs().bind("show.ui-tabs", 
    function(event, ui) {
        console.log(ui);
        console.log('show tab');
         if (ui.panel.id == 'id-of-some-tab-page') {
               console.log('It is showing!');
          }
    }
);

These are the events you can register callbacks for:

• load.ui-tabs
• show.ui-tabs
• select.ui-tabs
• add.ui-tabs
• remove.ui-tabs
• enable.ui-tabs
• disable.ui-tabs

The "ui" object that's passed into the callback function has lots of interesting properties (just dump it with Firebug's console.log or console.dir) but you'll probably be most interested in 'ui.panel.id' since that will hold the id of the tab page that the event has been triggered for.

---

Comments