Search and Top Navigation
#2489 closed bug (worksforme)
Opened March 11, 2008 03:56PM UTC
Closed March 15, 2008 03:14PM UTC
Last modified May 24, 2008 03:39AM UTC
Nested Tabs with different styling dont work
| Reported by: | PushkingNoize | Owned by: | klaus |
|---|---|---|---|
| Priority: | major | Milestone: | |
| Component: | ui.core | Version: | 1.2.3 |
| Keywords: | nested tabs styling bug | Cc: | |
| Blocked by: | Blocking: |
Description
I've played a lot around with the actual trunk version, because the old versions have memory leaks in IE6. I need to do an implementation like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Subtabs</title>
<link href="css/popup.css" rel="stylesheet" type="text/css" media="all" />
<script src="scripts/jquery_ui-trunk/ui.tabs.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
$("#example > ul").tabs();
});
$("#subtabs > ul").tabs({
navClass: "ui-tabs-sub-nav",
selectedClass: 'ui-tabs-sub-selected',
unselectClass: 'ui-tabs-sub-unselect',
disabledClass: 'ui-tabs-sub-disabled',
panelClass: 'ui-tabs-sub-panel',
loadingClass: 'ui-tabs-sub-loading'
});
</script>
</head>
<body>
<div id="example">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<div id="subtabs">
<ul>
<li><a href="#subfragment-1"><span>Sub 1</span></li>
<li><a href="#subfragment-2"><span>Sub 2</span></li>
</ul>
<div id="subfragment-1">
subfragment-1<br/>
</div>
<div id="subfragment-2">
subfragment-2<br/>
</div>
</div>
</div>
<div id="fragment-2">
fragemnt-2
</div>
<div id="fragment-3">
fragment-3
</div>
</div>
</body>
</html>
The Subfragment tabs should have a different styling as the main tabs.
I could isolate the problem as follows:
- The Plugin does append the default CSS classes to all child elements (including the subtabs ul, li, div elements), so I have to overwrite the styling of the main-tabs in the subtabs style. May someone could change the behaviour of the plugin that it just affects the right ul, li and divs (with child selctors or something)
- If I switch the subtabs, all tabs (inclusive the currently open maintab) will be hidden. so there is no more content on the site. think that is the same problem.
- The subtabs ul, li and divs have the subtab css styles but also the maintabs styles. they should only have the subtabs styles
the default nested tabs implementation described here: http://www.stilbuero.de/jquery/tabs_3/nested.html is not usable for my project, because: 1. they should have different styling, 2. because I will have nested nested tabs and things like that.
hope my weak english is understandable. (i am native german speaker)
feel free to contact me through email: info@pushkingnoize.ch