I've got this code working if it helps
$("#TabContainer ul.tabs").tabs().bind("select.ui-tabs", function(e,
ui) {
//Code inside here runs when tab is selected
});
On Jan 21, 10:29 am, Alexandre Plennevaux <aplennev...@gmail.com>
wrote:
> Hi all,
>
> I'm using ui.tabs and i would like to trigger a function when a tab is
> clicked, or more precisely, when a new panel gets shown.
>
> I figured from the doc i should use the select callback but that does
> not work... HEre is the code i use
>
> var $tabs = $("#tabbedTextContent").tabs({
> selected: 0,
> fx: { opacity: 'toggle', duration: 200 },
> select: function(e, ui)
> {
> alert("hi"); //<!-- the
> alert() never gets called
> var $img =
> $('#tabbedTextContent div.ui-tabs_panel:visible img.albumImage');
> if ($img.length)
> {
>
> $('#imageLegend').text($img.attr('title'));
> }
> }
> });
>
> So, the tabs are displayed and work correctly, but the select
> callback (namely, the alert() call) never gets fired...
>
> Right after that block of code i have
>
> $('#tabbedTextContent img.albumImage')
> .css('cursor', 'pointer')
> //.attr('title', "Click to view the next
> image")
> .click(function()
> { // in image albums, clicking on an
> image brings the user to the next image
> var currentTab =
> $tabs.data('selected.tabs');
>
> $('#imageLegend').text($(this).attr('title'));
> var nextTab = (currentTab <
> $tabs.length - 1) ? currentTab + 1 : 0;
> $tabs.tabs('select', nextTab);
> return false;
> });
>
> which works just fine.
