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>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Tab 1 Content</div>
<div class="TabbedPanelsContent">Tab 2 Content</div>
<div class="TabbedPanelsContent">Tab 3 Content</div>
<div class="TabbedPanelsContent">Tab 4 Content</div>
</div>
</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.
Archived Comments
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.
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.
I'm right there with you, Todd... Will be great to see the final release of this.
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?