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">

&lt;li class="TabbedPanelTab" tabindex="0"&gt;Tab 1&lt;/li&gt;
&lt;li class="TabbedPanelTab" tabindex="0"&gt;Tab 2&lt;/li&gt;
&lt;li class="TabbedPanelTab" tabindex="0"&gt;Tab 3&lt;/li&gt;
&lt;li class="TabbedPanelTab" tabindex="0"&gt;Tab 4&lt;/li&gt;

</ul> <div class="TabbedPanelsContentGroup"> <div class="TabbedPanelContent">

  &lt;p&gt;By default, the Tabbed Panel CSS does not define a height or width to the widget.&lt;/p&gt;
  &lt;p&gt;The height of the widget will change depending on the size of the content of the current open panel.&lt;/p&gt;
  &lt;p&gt;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. &lt;/p&gt;
&lt;div class="TabbedPanelContent"&gt; Tab 2 Content &lt;/div&gt;
&lt;div class="TabbedPanelContent"&gt;

  &lt;p&gt;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. &lt;/p&gt;
  &lt;p&gt;.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. &lt;/p&gt;
  &lt;p&gt;Also, tabindex=&quot;0&quot; has to be set on every tab element for keyboard navigation to work correctly. &lt;/p&gt;
&lt;div class="TabbedPanelContent"&gt;Tab 4 Content&lt;/div&gt;

</div> </div>

Pretty simple, eh?