Search the web
Sign In
New User? Sign Up
ydn-javascript · Yahoo! User Interface Library Group
? Already a member? Sign in to Yahoo!

Yahoo! Groups Tips

Did you know...
Want to share photos of your group with the world? Add a group photo to Flickr.

Best of Y! Groups

   Check them out and nominate your group.
Having problems with message search? Fill out this form to ensure your group is one of the first to be migrated to the new message search system.

Messages

  Messages Help
Advanced
Nested instances of TabView   Message List  
Reply | Forward Message #30637 of 52119 |
I have a need for 2 levels of tabs. I am currently using YUI's TabView
building out my main tabs from JavaScript and my 2nd-level tabs using
markup. The trouble is that my 2nd level tabs do not split out the
content into individual tabs (all tab content shows up in the default
tab) and clicking on the tabs do not change the tab view to the
clicked tab's content. Here's the code I'm working with

<div id="container"></div>
<script type="text/javascript">
(function() {
var tabView = new YAHOO.widget.TabView();

tabView.addTab( new YAHOO.widget.Tab({
label: 'My Content',
dataSrc: '../inc/mycontent.php',
cacheData: true
}));

tabView.addTab( new YAHOO.widget.Tab({
label: 'Nested Tabs',
dataSrc: '../inc/nested_tabs.php',
cacheData: true,
active: true
}));

tabView.appendTo('container');
})();
</script>


In my nested_tabs.php file I have the following:

<div id="mydemo" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab10"><em>Tab One Label</em></a></li>
<li><a href="#tab20"><em>Tab Two Label</em></a></li>
<li><a href="#tab30"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div id="tab10"><p>Tab One Content</p></div>
<div id="tab20"><p>Tab Two Content</p></div>
<div id="tab30"><p>Tab Three Content</p></div>
</div>
</div>

<script>
(function() {
var tabView2 = new YAHOO.widget.TabView('mydemo');
})();
</script>

Can anyone help me figure out why my 2nd-level tabs are not
functioning properly? Also, I have tried building my 2nd-level tabs
using JavaScript, but that did not work either, infact the 2nd-level
tabs built using JavaScript did not even render.

Lastly, I tried using Dav Glass's nested tab code
(http://blog.davglass.com/files/yui/tab6/) but could not reproduce his
example.

PS: Sorry I do not have an online version available to demo.

Thanks for the help!
_rs



Fri May 9, 2008 2:16 pm

ratioswitch
Offline Offline
Send Email Send Email

Forward
Message #30637 of 52119 |
Expand Messages Author Sort by Date

I have a need for 2 levels of tabs. I am currently using YUI's TabView building out my main tabs from JavaScript and my 2nd-level tabs using markup. The...
Ryan Smith
ratioswitch
Offline Send Email
May 9, 2008
2:16 pm

RS: I don't believe the script in what you are "including" will get executed. You can put tabs inside of tabs, but I have not personally tried to create the...
bretlevy
Offline Send Email
May 9, 2008
6:16 pm

Thanks for the tips Brett. I did end up getting my nested tabs to work using mark-up only, but the code is quite clunky and hard to manage. I really like the...
ratioswitch
Offline Send Email
May 9, 2008
8:09 pm

I Got It ... nested YUI tabs using JavaScript code only! I just needed to do everything on the surface. Previously, I was trying to use dataSrc: to include my...
ratioswitch
Offline Send Email
May 9, 2008
8:28 pm

Now that I have my nested tabs displaying correctly (TabView), I want to place an icon next to the tab label only for the active tab. Manually I have done this...
ratioswitch
Offline Send Email
May 15, 2008
9:35 pm

I could be way off here, but I think I saw someone do something like this by defining a CSS class with a background image and left padding wider than the...
Karr, David
david.karr@...
Send Email
May 15, 2008
10:27 pm

So, you're saying that instead of adding a span (within my list item to hold the icon and anchor) AND adding a class to the list item itself (to display the...
ratioswitch
Offline Send Email
May 19, 2008
4:12 am
Advanced

Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Guidelines - Help