<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Monkey Byte &#187; jQuery</title>
	<atom:link href="http://www.monkeybyte.net/category/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.monkeybyte.net</link>
	<description>&#34;Artwork, entertainment, and all things digital&#34;</description>
	<lastBuildDate>Sat, 07 Jan 2012 00:28:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>&#8220;Rockin&#8217; the Tab Slot&#8221;</title>
		<link>http://www.monkeybyte.net/2009/08/22/rockin-the-tab-slot/</link>
		<comments>http://www.monkeybyte.net/2009/08/22/rockin-the-tab-slot/#comments</comments>
		<pubDate>Sun, 23 Aug 2009 06:22:49 +0000</pubDate>
		<dc:creator>Jade</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Tech]]></category>

		<guid isPermaLink="false">http://www.monkeybyte.net/?p=642</guid>
		<description><![CDATA[So you need a tab system for your site.  You want something flexible, cms-friendly, and a little fancier than just "click-change"; something with a little animation flare, but still straightforward. 

Well, a blog called "<a href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial">Queness</a>" has offered up just the thing, not to mention being filled with a few other jquery goodies. (feel free to poke around; I did).  <a href="http://www.monkeybyte.net/?p=642">Gimme More &#187;</a>]]></description>
			<content:encoded><![CDATA[<p></p>
<h3>Cleaning House</h3>
<p>I recently decided that I wanted to add a little organization to my sidebar.  Previously, links of different groups ran together with the post categories, archives, meta and links under different categories, as modules all jumbled together.  There was no distinguishing one from the other.  It had bugged me for some time.<br />
Also, I didn&#8217;t necessarily like viewers of my blog seeing the &#8220;login&#8221; section simply because there was no need for them to.  At the same time, I wanted to make it convenient for me to get to when I wanted to log in.</p>
<p>My solution?  The use of tabs to logically group categories, archives and the meta/login modules together.  This would then allow me to group all links together in their own section, and keep the &#8220;meta&#8221; section out of the view of users but still allowing me to get to it rather easily.    </p>
<h3><a href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial">&#8220;A Great Tab System&#8221;</a></h3>
<p><a href="http://www.monkeybyte.net/?attachment_id=692" rel="attachment wp-att-692"><img src="http://www.monkeybyte.net/wp-content/uploads/2009/08/tabs-example.jpg" alt="tabs-example" title="tabs-example" width="150" height="150" class="alignleft size-full wp-image-692" /></a>So off I went to find a good jquery tab system.  There are various systems out there, from the straight forward &#8220;click-change&#8221; to more robust plugin-geared tabs with animated transitions.  In my search, I came across a rather nice modular-based one.  It treats the labels for the tabs across the top as an &#8220;unordered list&#8221;.  Brilliant! </p>
<p>This allows for adding tabs as you go along with very little overhead.  Quite nice.  Besides the implications of using something like this to &#8220;dynamically&#8221; generate tabs using a database-driven site, i.e. something like WordPress&mdash;mmm, my favorite ; ) &mdash;it grants you a generous level of control over the tab states (&#8220;hover,&#8221; &#8220;active,&#8221; and so on), so that you can let your users know what tab is currently active, for example.</p>
<p><a href="http://www.monkeybyte.net/?attachment_id=703" rel="attachment wp-att-703"><img src="http://www.monkeybyte.net/wp-content/uploads/2009/08/queness-thumb.jpg" alt="queness-thumb" title="queness-thumb" width="150" height="150" class="alignright size-full wp-image-703" /></a>The tab system is found on <a href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial">Queness</a>.  The tutorial that the owner of the blog has set forth is well-written and fairly easy to follow, but keep in mind that it&#8217;s written specifically for duplication of the tab setup that he has in his own sidebar.  For customizing, some may consider this a little more involved/advanced, so if your jquery and CSS skills are basic, expect customization to take some time and learning.  Otherwise, it was fairly simple to figure out.  <!--I, of course, customized it to fall more in line with my needs and the design of my site.  Where the tutorial itself, I think, is written for a beginners level, some may consider customizing slightly more advanced. So if your knowledge of jquery/javascript and CSS is basic, --></p>
]]></content:encoded>
			<wfw:commentRss>http://www.monkeybyte.net/2009/08/22/rockin-the-tab-slot/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

