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?