Spry 1.4: Tabs

This post is more than 2 years old.

I've blogged about the tabs in Spry 1.4 before, I even built a ColdFusion wrapper for the earlier code. However, now it is "officially" released. I've updated the ColdFusion Portal to use the Spry tab code. I'll also be replacing the tab code in BlogCFC as well. For a quick example of how easy it is to use the tab code, here is the sample code that ships with Spry (so in other words, apply the big old Adobe copyright to this code):

<!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>Spry Tabbbed Panels</title> <link href="SpryTabbedPanels.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" type="text/javascript" src="SpryTabbedPanels.js"></script> </head> <body> <p></p> <div class="TabbedPanels" id="tp1"> <ul class="TabbedPanelsTabGroup"> <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
	&lt;li class="TabbedPanelsTab" tabindex="0"&gt;Tab 2&lt;/li&gt;
	&lt;li class="TabbedPanelsTab" tabindex="0"&gt;Tab 3&lt;/li&gt;
	&lt;li class="TabbedPanelsTab" tabindex="0"&gt;Tab 4&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="TabbedPanelsContentGroup"&gt;
	&lt;div class="TabbedPanelsContent"&gt;Tab 1 Content&lt;/div&gt;
	&lt;div class="TabbedPanelsContent"&gt;Tab 2 Content&lt;/div&gt;

	&lt;div class="TabbedPanelsContent"&gt;Tab 3 Content&lt;/div&gt;
	&lt;div class="TabbedPanelsContent"&gt;Tab 4 Content&lt;/div&gt;
&lt;/div&gt;

</div> <script language="JavaScript" type="text/javascript"> var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: 2 }); </script> </body> </html>

You can see more examples here.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by todd sharp posted on 12/18/2006 at 8:03 PM

Can i be picky? I wish the tab content width would stay constant on the portal (like it does in your examples here).

This example is pretty sweet - I can't wait until Spry is officially released so I can play with these at work.

Comment 2 by Raymond Camden posted on 12/18/2006 at 8:10 PM

Odd. I see it changing. I have width set to 100% though so it should stay the same. Maybe someone smarter than me will see the issue.

Comment 3 by Sid Wing posted on 12/18/2006 at 9:56 PM

I'm right there with you, Todd... Will be great to see the final release of this.

Comment 4 by DK posted on 12/19/2006 at 1:01 AM

my only qualm with the tabbed implementation is size. Anywhere I could realistically use it at the moment the data in those tabs would be large enough that I would question the validity of doing that load in if theres a chance the user wouldn't switch to one of the tabs that just ate up that processing power.

I could be wrong but given the class designation I don't think it would be easy to tie in the new updatecontent or innerhtml to the current tabbed panels release in 1.4 to load onclick without making much of it homebrewed. Am I wrong?