<?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>Blowing Through Lines &#187; tabs</title>
	<atom:link href="http://blowingthroughlines.com/category/tabs/feed/" rel="self" type="application/rss+xml" />
	<link>http://blowingthroughlines.com</link>
	<description>Highly addictive code.</description>
	<lastBuildDate>Tue, 15 Jun 2010 18:14:52 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Prototype javascript css Tabs</title>
		<link>http://blowingthroughlines.com/2007/12/29/javascript/prototype-css-tabs/</link>
		<comments>http://blowingthroughlines.com/2007/12/29/javascript/prototype-css-tabs/#comments</comments>
		<pubDate>Sat, 29 Dec 2007 21:53:30 +0000</pubDate>
		<dc:creator>jeff</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[tabs]]></category>

		<guid isPermaLink="false">http://blowingthroughlines.com/2007/12/29/flash-as3/prototype-css-tabs/</guid>
		<description><![CDATA[Recently I had to make tabs.  Something that has been solved hundreds of times.  However I didn&#8217;t want to fuck around with a special user interface framework like http://developer.yahoo.com/yui/.  Since I use prototype on almost every project since its inception, I decided to just roll out my own solution using the prototype [...]


No related posts.

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>Recently I had to make tabs.  Something that has been solved hundreds of times.  However I didn&#8217;t want to fuck around with a special user interface framework like <a href="http://developer.yahoo.com/yui/">http://developer.yahoo.com/yui/</a>.  Since I use <a href="http://www.prototypejs.org/">prototype</a> on almost every project since its inception, I decided to just roll out my own solution using the prototype library as a base.  It turns out that the implementation was incredibly simple.  I have attached a working example for your copy and paste pleasure.   The javascript is incredibly simple.  The entire javascript programming was less than 25 lines.</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p28code2'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p282"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
</pre></td><td class="code" id="p28code2"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> tablinks <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> tabcontent <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">function</span> handletab<span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> element <span style="color: #339933;">=</span> event.<span style="color: #660066;">element</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&lt;</span>tablinks.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> tabli <span style="color: #339933;">=</span> tablinks<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">up</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'li'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>tablinks<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">==</span>element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			tabcontent<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			tabli.<span style="color: #660066;">removeClassName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'deactivetab'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			tabli.<span style="color: #660066;">addClassName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'activetab'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
			tabcontent<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			tabli.<span style="color: #660066;">removeClassName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'activetab'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			tabli.<span style="color: #660066;">addClassName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'deactivetab'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">function</span> homepageSetup<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	tablinks <span style="color: #339933;">=</span> $$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a.tablink'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	tabcontent <span style="color: #339933;">=</span> $$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div.tabcontent'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i<span style="color: #339933;">&lt;</span>tablinks.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		tablinks<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">observe</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span>handletab<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		tablinks<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">onclick</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p><a href="http://blowingthroughlines.com/wp-content/uploads/2007/12/blowingthroughlinescom-tabs-example.zip" title="Prototype javascript css tabs - blowingthroughlines.com">Prototype javascript css tabs &#8211; blowingthroughlines.com</a></p>
<p>If you find this article and or code useful feel free to leave a comment.  I&#8217;d love to hear what you think.</p>


<p>No related posts.</p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blowingthroughlines.com/2007/12/29/javascript/prototype-css-tabs/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
