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.
