Spry Tabs

Spry Tabs are very easy to create, they allow you to organize a page of HTML into a user friendly tabbed interface. For tab panel you don't need a spry region since we won't be working with data.

What You Need

To create a Spry tab panel on your page you need the SpryTabbedPanels.js file no other Spry library files are needed. In addition to the single javascript library file you also need the SpryTabbedPanels.css file.

The Javascript

With most of the beginner spry tutorials there just isn't much javascript to write and the tabbed panel is no exception.

There really isn't anything here that needs explaining in this simple example. The only thing you need to pass into the Tabbed Panel constructor function is the id of your panel group.

The HTML

With all of the Spry widgets or utilities the HTML markup and its classes or id's signal to Spry or the CSS what to do or how its supposed to look. Here the Tab Panel has specific CSS classes assigned to the HTML tags to create the look of the Tabbed Panel, the ID of the outer DIV tag with the class of "TabbedPanels" is what gets passed to the Spry TabbedPanels constructor to give the desired functionality.

The Tab panel itself is broken up into two sections the first section defines the actual tabs that you see across the top. We set the tabindex of each tab to zero so that it can be navigated by the keyboard. If you don't care about keyboard accessiblity you can leave those out. The tabs are simply an unordered list with specific CSS classes assigned to them so that they show horizontally. The next section is the "TabbedPanelsContentGroup" and as you would expect contains the content of your tabs. In this case the group is a HTMl DIV tag and each individual tab is also a DIV. Each tab content is assigned a class indicating that it to be treated as tab panel content. Each tab that you set up in the TabPanelsTabGroup must have an associated panel in the TabbedPanelsContentGroup. The tab panel will still display if you don't have the right number of tabs and panels but you obviously won't get the desired results.

The Result