Spry * Insert the Sliding Panels widget

Locate the SprySlidingPanels.js file and add it to your web site. You can find the SprySlidingPanels.js file in the widgets/slidingpanels 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 SprySlidingPanels.js file to it. The SprySlidingPanels.js file contains all of the information necessary for making the Sliding Panels widget interactive.

Locate the SprySlidingPanels.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 Sliding Panels widget to and link the SprySlidingPanels.js file to the page by inserting the following script tag in the page’s head tag:

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

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

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

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

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

Add the Sliding Panels widget to your web page by inserting a widget container tag, such as a div tag, where you want the widget to appear on the page. You must assign the widget tag a unique ID and the SlidingPanels class, as follows:

<div id="SlidingPanels1" class="SlidingPanels">
</div>

Add a content panel container tag to the widget by inserting a <div class="SlidingPanelsContentGroup"> tag inside the <div id="SlidingPanels1"...> tag, as follows:

<div id="SlidingPanels1" class="SlidingPanels">
	<div class="SlidingPanelsContentGroup">
	</div>
</div>

Add content panels to the content panel container by adding <div class="SlidingPanelsPanelTab"> tags inside the container tag. Each content panel must have a unique ID, and be assigned the SlidingPanelsContent class, as follows:

<div id="SlidingPanels1" class="SlidingPanels">
	<div class="SlidingPanelsContentGroup">
		<div id="p1" class="SlidingPanelsContent">
		</div>
		<div id="p2" class="SlidingPanelsContent">
		</div>
		<div id="p3" class="SlidingPanelsContent">
		</div>
		<div id="p4" class="SlidingPanelsContent">
		</div>
	</div>
</div>

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

The unique ID for each content panel is important because later you’ll use the IDs to create navigation for the widget.

To initialize the Spry sliding panels object, insert the following script block after the HTML code for the SlidingPanels widget:

<div id="SlidingPanels1" class="SlidingPanels">
. . .
</div>
<script type="text/javascript">
	var sp1 = new Spry.Widget.SlidingPanels("SlidingPanels1");
</script>

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

Make sure that the ID of the widgets’s container div tag matches the ID parameter you specified in the Spry.Widgets.SlidingPanels method. Make sure that the -JavaScript call comes after the HTML code for the widget.

After you’ve added all the code for the widget, add buttons or links for navigation. There are many ways that you can do this. In this example, we’ll add links for the first, previous, next, and last panels:

<a href="#" onclick="sp1.showFirstPanel(); return false;">First</a> |
<a href="#" onclick="sp1.showPreviousPanel(); return false;">Previous</a> |
<a href="#" onclick="sp1.showNextPanel(); return false;">Next</a> |
<a href="#" onclick="sp1.showLastPanel(); return false;">Last</a>
<div id="SlidingPanels1" class="SlidingPanels">
. . .
</div>

In the preceding example, the onclick behaviors are behaviors that are built into the Sliding Panels widget. For example, when you assign the showNextPanel behavior to a link, that link always takes you to the next panel in your group of content panels. The syntax of the behavior is variableID.behavior. You created the variable ID in the constructor script tag that follows the HTML code for the widget. In the example, the variable is sp1, but it can be anything.

Save the page.

After you add some content to the content panels, the complete code might looks as follows:

<head>
. . . 
<script type="text/javascript" src="SprySlidingPanels.js"></script>
<link href="SprySlidingPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
. . .
<a href="#" onclick="sp1.showFirstPanel(); return false;">First</a> |
<a href="#" onclick="sp1.showPreviousPanel(); return false;">Previous</a> |
<a href="#" onclick="sp1.showNextPanel(); return false;">Next</a> |
<a href="#" onclick="sp1.showLastPanel(); return false;">Last</a>
<div id="SlidingPanels1" class="SlidingPanels">
	<div class="SlidingPanelsContentGroup">
		<div id="p1" class="SlidingPanelsContent">
			<p>Panel 1</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
		<div id="p2" class="SlidingPanelsContent">
			<p>Panel 2</p>
			<p>Panel 2</p>
		</div>
		<div id="p3" class="SlidingPanelsContent">
			<p>Panel 3</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
		<div id="p4" class="SlidingPanelsContent">
			<p>Panel 4</p>
			<p>Panel 4</p>
		</div>
	</div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("SlidingPanels1");
</script>
</body>

Spry

Insert the Sliding Panels widget

document.write(terms_Related_Information);