Spry User Guide - Support - Adobe

. . .
Tab 1
Tab 2
Tab 3
Tab 4
Tab 1 Content
Tab 2 Content
Tab 3 Content
Tab 4 Content
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
In the code, the new JavaScript operator initializes the Tabbed Panel widget object, and transforms the div content
with the ID of TabbedPanels1 from static HTML code into an interactive page element. The
Spry.Widget.TabbedPanels method is a constructor in the Spry framework that creates Tabbed Panel objects, and
the information necessary to initialize the object is contained in the SpryTabbedPanels.js JavaScript library that you
linked to in the head of the document.
Each of the elements in the Tabbed Panel widget contains a CSS class. These classes control the style of the Tabbed
Panel widget, and exist in the accompanying SpryTabbedPanels.css file.
You can change the appearance of any given part of the Tabbed Panel widget by editing the CSS rule that corresponds
to the class names assigned to it in the HTML code. For example, to change the background color of the Tabbed
Panel’s tabs, edit the TabbedPanelsTab rule in the SpryTabbedPanels.css file. Keep in mind that changing the CSS
code in the SpryTabbedPanels.css file will affect all tabbed panels that are linked to that file.
SPRY
User Guide
In addition to the classes shown in the HTML code, the Tabbed Panel widget includes certain default behaviors that
are attached to the widget. These behaviors are a built-in part of the Spry framework, and are in the SpryTabbed-
Panels.js JavaScript library file. The Tabbed Panel library includes behaviors related to hovering, tab clicking (to open
panels), panel focus, and keyboard navigation.
You can change the look of the Tabbed Panel as it relates to these behaviors by editing the appropriate classes in the
SpryTabbedPanels.css file. If you want to remove a given behavior, you can delete the CSS rules that correspond to
that behavior.
Note: While you can change the look of the Tabbed Panel as it relates to a certain behavior, you cannot alter the built-in
behaviors themselves. For example, Spry still places a TabbedPanelsContentVisible class on the currently open panel,
even if no properties are set for the TabbedPanelsContentVisible class in the SpryTabbedPanels.css file.
24