Does anyone know if there is a "correct" way to nest tabs?
By "nest tabs" I mean.
I want one row of tabs (tabA, tabB, tabC) such that when I select tabA
or tabC content is rendered directly onto those tabs.
But when I select tabB a second row of tabs displays beneath the first
(tabX, tabY, tabZ).
I've got some code that seems to be working except for one minor
problem.
tabA is selected by default and when the page loads the "tabshow"
event seems to be getting called twice.
It's a minor problem that I can code around but I'm curious as to why
it might be happening and/or if this is a bug?
Here's my code ...
HTML:
<div id="tabrow1" >
<ul>
<li><a href="home.jsp" class="homeTab">Home</a></li>
<li><a href="#tabrow1-2">Find a quote</a></li>
<li><a href="addQuote.jsp">Add a quote</a></li>
</ul>
<div id="tabrow1-2">
<div id="tabrow2">
<ul>
<li><a href="findQuote.jsp" class="searchTab">Search</a></li>
<li><a href="authors.jsp">Browse by author</a></li>
<li><a href="recentlyAdded.jsp">Recently added</a></li>
</ul>
</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
var $tabs = $("#tabrow1").tabs();
var findaQuoteTabs = $("#tabrow2").tabs();
$('#tabrow1').bind('tabsshow', function(event, ui) {
var selected = $tabs.tabs('option', 'selected'); // => 0
if (selected == 0) {
home_renderContent(); // This gets called twice when the page
loads. Hmmmmmm... I wonder why????
}
});
$('#tabrow2').bind('tabsshow', function(event, ui) {
var selected = findaQuoteTabs.tabs('option', 'selected'); // => 0
if (selected == 1) {
authors_sortByName();
}
if (selected == 2) {
recentlyAdded_listQuotes();
}
});
});
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
