DaveQB's Rambles

If you haven't checked out yui, I strongly suggest you do. A fantastic ready to go library of AJAX wonder. Simply include the js and/or css files you need for the function you want and follow the great documentation in implementing it into your website. http://developer.yahoo.com/yui/

I had some trouble implementing yui's TabView. Look at the basis of TabView below.

<div id="menu" class="yui-navset">
	<ul class="yui-nav">
	<li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
	<li><a href="#tab2"><em>Tab Two Label</em></a></li>
	<li><a href="#tab3"><em>Tab Three Label</em></a></li>
	</ul>




	<div class="yui-content">
	<div><p>Tab One Content</p></div>
	<div><p>Tab Two Content</p></div>
	<div><p>Tab Three Content</p></div>
	</div>
</div>

The problem I had was putting the tab labels into the header div and the the content into the place I wanted it in the body div. The problem was when I closed the header div, the div with id "menu" would then be closed and that was the end of the TabView; the contents would all show at once. Finally, I figured out that you simply wrap the header as well, into the menu div block. See below:

<div id="menu" class="yui-navset">

  <div id="header">
    <img src="header graphic.jpg">
    <h1>Some text maybe</h1>


	<ul class="yui-nav">
	<li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
	<li><a href="#tab2"><em>Tab Two Label</em></a></li>
	<li><a href="#tab3"><em>Tab Three Label</em></a></li>
	</ul>

  </div> <!-- Close header, but menu still open -->


	<div class="yui-content">
	<div><p>Tab One Content</p></div>
	<div><p>Tab Two Content</p></div>
	<div><p>Tab Three Content</p></div>
	</div>
</div> <!-- now close menu -->

So simple, but had me going for a little bit. Damn yui is so sweet!!