Skip to main content

Bug Tracker

Side navigation

#2489 closed bug (worksforme)

Opened March 11, 2008 03:56PM UTC

Closed March 15, 2008 03:14PM UTC

Last modified March 14, 2012 05:06AM UTC

Nested Tabs with different styling dont work

Reported by: PushkingNoize Owned by: klaus
Priority: major Milestone: 1.2.4
Component: ui 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

Attachments (0)
Change History (2)

Changed March 12, 2008 03:39PM UTC by paul comment:1

owner: paulklaus

Changed March 15, 2008 03:14PM UTC by klaus comment:2

resolution: → worksforme
status: newclosed

r4968