Spry 1.4: Tabs

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; &lt;/div&gt; &lt;script language="JavaScript" type="text/javascript"&gt; var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: 2 }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code>

You can see more examples here.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for Extend by Auth0. He focuses on serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

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

Comments