[jQuery] Using nested ui.tabs - make the most of it!
I have several 'top level tabs' and within some of these I have use a
vertical tab list and assigned these a class of "vertical-tab" for css
purposes.
All is fine styiling wise but...
now I want to add a javascript call to the onclick of each tab.
for the top (horizontal, non-nested) tabs I want to, say, alert the
text if the tab - ui.tab.textContent - no probs - I add the function
$(document).ready(function() {
$("#tabs").tabs();
var navHeight = $("div#content").height();$("div#navigation-
wrapper").css("height", navHeight + "px");
$('#tabs').bind('tabsselect', function(event, ui)
{ alert('ui.tab.textContent: ' + ui.tab.textContent +
'\nui.panel.id: ' + ui.panel.id + '\nui.panel.textContent: ' +
ui.panel.textContent);
});
});
for the nested (vertical) tab I want to alert the ui.tab.textContent
BUT prefix it with the ui.tabContent of the PARENT tab. My issue is I
can't construct the syntax to get back to the LI that relates to the
panel I display to get the text!!
I assume the logic is thus...
where div.id = "tabs=n" and class contains "ui-tabs-vertical" (or
take this argument first?)
add to the a href an onClick of
- alert my <a href>.textContent AND textContent from relative link
(i.e. where <a href> url of "#tabs-n")
but just can't get my head around the syntax?!?! - ANY help would be
EXCELLENT!
PLEASE help!
Dylan