Spry * Insert the Tabbed Panels widget

Locate the SpryTabbedPanels.js file and add it to your web site. You can find the SpryTabbedPanels.js file in the widgets/tabbedpanels directory, located in the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files.

For example, create a folder called SpryAssets in the root folder of your web site, and move the SpryTabbedPanels.js file to it. The SpryTabbedPanels.js file contains all of the information necessary for making the Tabbed Panels widget interactive.

Locate the SpryTabbedPanels.css file and add it to your web site. You might choose to add it to the main directory, a SpryAssets directory, or to a CSS directory if you have one.

Open the web page to add the Tabbed Panels widget to and link the SpryTabbedPanels.js file to the page by inserting the following script tag in the page’s head tag:

<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>

Make sure that the file path to the SpryTabbedPanels.js file is correct. This path varies depending on where you’ve placed the file in your web site.

Link the SpryTabbedPanels.css file to your web page by inserting the following link tag in the page’s head tag:

<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

Make sure that the file path to the SpryTabbedPanels.css file is correct. This path varies depending on where you’ve placed the file in your web site.

To add the tabbed panels widget to your web page, insert the following div tag where you want the tabbed panel to appear on the page:

<div id="TabbedPanels1" class="TabbedPanels">
</div>

To add tabs to the tabbed panel, insert a ul class="TabbedPanelsTabGroup" tag inside the div id="TabbedPanels1"... tag, and an li class="TabbedPanelsTab" tag for each tab to add, as follows:

<div class="TabbedPanels" id="TabbedPanels1">
	<ul class="TabbedPanelsTabGroup">
		<li class="TabbedPanelsTab">Tab 1</li> 
		<li class="TabbedPanelsTab">Tab 2</li> 
		<li class="TabbedPanelsTab">Tab 3</li> 
		<li class="TabbedPanelsTab">Tab 4</li>
	</ul>
</div>

The preceding code adds four tabs to the widget. You can add unlimited tabs.

To add a content area (or panel) for each of the tabs, insert a div class="TabbedPanelsContentGroup" container tag after the ul tag, and a div class="TabbedPanelsContent" tag for each content panel, as follows:

<div class="TabbedPanels" id="TabbedPanels1">
	<ul class="TabbedPanelsTabGroup">
		<li class="TabbedPanelsTab">Tab 1</li> 
		<li class="TabbedPanelsTab">Tab 2</li> 
		<li class="TabbedPanelsTab">Tab 3</li> 
		<li class="TabbedPanelsTab">Tab 4</li>
	</ul>
	<div class="TabbedPanelsContentGroup">
		<div class="TabbedPanelsContent">Tab 1 Content</div>
		<div class="TabbedPanelsContent">Tab 2 Content</div>
		<div class="TabbedPanelsContent">Tab 3 Content</div> 
		<div class="TabbedPanelsContent">Tab 4 Content</div> 
	</div> 
</div>

Insert the content between the opening and closing TabbedPanelsContent tags (for example, Tab 1 Content, as in the preceding example). The content can be any valid HTML code, including HTML form elements

To initialize the Spry tabbed panels object, insert the following script block after the HTML code for the Tabbed Panels widget:

<div id="TabbedPanels1" class="TabbedPanels">
. . .
</div>
<script type="text/javascript">
	var TP1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>

The new JavaScript operator initializes the Tabbed Panels widget object, and transforms the div content with the ID of TabbedPanels1 from static HTML code into an interactive tabbed panels object. The Spry.Widget.TabbedPanels method is a constructor in the Spry framework that creates tabbed panels objects. The information necessary to initialize the object is contained in the SpryTabbedPanels.js JavaScript library that you linked to at the beginning of this procedure.

Make sure that the ID of the tabbed panels’ div tag matches the ID parameter you specified in the Spry.Widgets.TabbedPanels method. Make sure that the JavaScript call comes after the HTML code for the widget.

Save the page.

The complete code looks as follows:

<head>
. . .
	<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
	<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script> 
</head> 
<body>
	<div class="TabbedPanels" id="TabbedPanels1">
		<ul class="TabbedPanelsTabGroup">
			<li class="TabbedPanelsTab">Tab 1</li> 
			<li class="TabbedPanelsTab">Tab 2</li> 
			<li class="TabbedPanelsTab">Tab 3</li> 
			<li class="TabbedPanelsTab">Tab 4</li>
		</ul>
		<div class="TabbedPanelsContentGroup">
			<div class="TabbedPanelsContent">Tab 1 Content</div>
			<div class="TabbedPanelsContent">Tab 2 Content</div>
			<div class="TabbedPanelsContent">Tab 3 Content</div> 
			<div class="TabbedPanelsContent">Tab 4 Content</div> 
		</div>
	</div>
<script type="text/javascript">
	var TP1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script> 
</body></body>