Lupinia Studios
Lupinia Studios Home Search This Site Home About Writing Artwork Photography External Links Hosting
   
 
Spry Tabbed Panels
PHP/Javascript • Rev. July 19, 2007

Ever wanted to display content within a page in a more organized manner than simply listing it?  Using the Spry Framework for AJAX by Adobe Labs, one handy tool to use for this is their Tabbed Panels "widget".  If you're not familiar with Spry, I recommend you read this article about it.  Simply put, it's a Javascript library created by Adobe's research division, which allows web developers to create powerful and nice-looking Javascript applications without being an expert on Javascript.  A copy of the Spry framework (which includes the tabbed panels script and documentation, among other things) can be downloaded here:  Download Spry Framework for AJAX (.zip, 3.6mb)

Personally, I'm still getting the hang of working with javascript, but the Tabbed Panels script in the Spry package is one of my personal favourites for use on this site.  At the time of writing this, I've used it in three locations, with varying implementations.  However, I really haven't done anything unique with them, so the rest of this article is taken from Adobe's own description of them.  Click here for the original article.  Enjoy!

The Tabbed Panels widget is a disclosure widget that has a series of tabs along the top (or side) of the widget that opens content panels attached to the tabs.

By default, the Tabbed Panel CSS does not define a height or width to the widget. The height of the widget will change depending on the size of the content of the current open panel.

To set a fixed size for the widget, set the 'height' of the class .TabbedPanelsContent to whatever value you need. Overflow should be set to handle content longer than the set height.

Default Panel set to open the 3rd panel when the page loads. Spry has a 0 based counting system, so the constructor option {defaultTab: 2} will open the 3rd panel.

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

Tabindex="0" can be set on every tab element for keyboard navigation to work. You may also use anchors to enable the keyboard navigation. The 3rd sample down shows this functionality. As a note, using TabIndex for accessibility will not validate at W3C but include it here because IE and Mozilla browsers support it for accessibility reasons. Use anchors if your page needs to validate.

Tab 1 Content
Tab 2 Content

Tab 3 Content

More Content

More Content

Tab 4 Content
Using Links to open tabs

Open Panel Tab 1 | Tab 2 | Tab 3 | Tab 4

Open Panels programmatically by putting function calls on the <a> tag.
onclick="TabbedPanels1.showPanel(1);" where "TabbedPanels1 is the widget id.
onclick="TabbedPanels1.showPanel(2);"
onclick="TabbedPanels1.showPanel(3);"
Vertical Tabs and Anchors for Keyboard Navigation

Tabbed Panels can just as well be rendered vertically.

Using the default CSS file that comes with the widget, set the class of the main widget container tag from class="TabbedPanels" to class="VTabbedPanels". The widget will now use the VTabbedPanels classes and the tabs will render vertically, on the left. The markup is identical as is the other functionality.

This sample uses anchors in the tabs to enable switching between tabs. Use the Tab key to choose the tab and Enter to open the panel.

Tabbed Panels can just as well be rendered vertically.

Using the default CSS file that comes with the widget, set the class of the main widget container tag from class="TabbedPanels" to class="VTabbedPanels".

The widget will now use the VTabbedPanels classes and the tabs will render vertically, on the left. The markup is identical as is the other functionality.

This sample also shows how keyboard navigation can be enabled by wrapping each tab content with an <a>.

Content 3

Content 4

 

Alternate Markup

Widget can use almost any tag to create the structure, as long as the correct nesting structure is maintained.

Tab 1

Tab 2

Tab 3

Alternate Content Version. Check the markup used in this sample.

One of the rules of Spry Widgets is that we don't really care about the actual markup; what matters is the structure of the widget. As long as tags are nested in the same order, it doesn't matter what the markup is, as long it it follows HTML rules.

Content 3

Setting the Panels to open with onMouseOver

This example demonstrates how to open panels using the showPanel() behavior.

Content 1
Content 2
Content 3
Content 4

 



To Top | Back to Index

Home  |  About  |  Writing  |  Artwork  |  Photography  |  Miscellaneous  |  Links  |  Gallery  |  Journal
Donate  |  Search This Site  |  Contact  |  Support  |  Webmail  |  Hosting

© 2000-2010 Felix Lockhart. Click for more info.
Page generated in 0.002 seconds with 1 database query on Jul 31, 2010 23:43:45 (GMT -0400).
You are currently viewing the main version of this site.  Last modified on Apr 23, 2010 18:49:14 (GMT -0400).  Login or Create an Account.