While the official 1.4 release is still not ready yet, the folks over on the Spry team have released a new update today. You can read more about this at this forum post. This release focuses mostly on widgets and form validation - two areas that Spry doesn't have a lot of tools in - so I'm very happy to see this update.
Check out the examples first, then check out the new cool demo.
This is definitely a prerelease - so use with caution, but it does look pretty darn cool. Consider the tab menus. Here is a simple example:
<script language="JavaScript" type="text/javascript" src="../../widgets/tabbedpanels/SpryTabbedPanels.js"></script>
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelTab" tabindex="0">Tab 3</li>
<li class="TabbedPanelTab" tabindex="0">Tab 4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelContent">
<p>By default, the Tabbed Panel CSS does not define a height or width to the widget.</p>
<p>The height of the widget will change depending on the size of the content of the current open panel.</p>
<p>To set a fixed size for the widget, set the 'height' of the class .TabbedPanelContent to whatever value you need. Overflow should be set to handle content longer than the set height. </p>
</div>
<div class="TabbedPanelContent"> Tab 2 Content </div>
<div class="TabbedPanelContent">
<p>Default Panel set to open the 3rd panel onLoad. Spry has a 0 based counting system, so the constructor option {defaultTab: 2} will open the 3rd panel. </p>
<p>.TabbedPanels class has been set to a width of 500 pixels, so all widgets that use that class on this page will be that width. </p>
<p>Also, tabindex="0" has to be set on every tab element for keyboard navigation to work correctly. </p>
</div>
<div class="TabbedPanelContent">Tab 4 Content</div>
</div>
</div>
Pretty simple, eh?