Sliding Panels

Description

The Spry Sliding Panels is a disclosure widget that consists of a 'window' element, and a set of content panels behind the window. Clicking links (or other triggers) will move the requested panel into the window.

The content container (the element that holds the series of content panels) can be any size: one column horizontal or vertical, a lager rectangle, or any possible shape. The widget will move to the requested panel in the shortest possible distance, be that horzontally, vertically or diagonally.

Required Files

SprySlidingPanels.js

SprySlidingPanels.css

Reference File

SprySlidingPanels.html

Sample Files

SlidingPanelsSample.html

SlidingPanelsSample2.html

SlidingPanelsFromData.html

 

Structure

The widget structure is as follows:

   <widget container- the window>
      <content panels container>
<content panel> <content panel>
</widget container>

The markup used in this structure can be most any HTML, as long as it follows the rules for nesting.

Using the provided files, the default mark up is:

<div id="example1" class="SlidingPanels" tabindex="0">
   <div class="SlidingPanelsContentGroup">
     <div id="ex1_p1" class="SlidingPanelsContent p1">Panel 1</div>
     <div id="ex1_p2" class="SlidingPanelsContent p2">Panel 2</div>
     <div id="ex1_p3" class="SlidingPanelsContent p3">Panel 3</div>
   </div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels('example1');
</script>

Constructor

Widget Constructors are small pieces of javascript that activate the markup into the working widget. These scripts must come AFTER the markup on the page, since the markup needs to exist before the constructor fires.

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

Basic Constructor

A basic constructor specifies the name of the widget and identifies the ID of the main markup container. The name of the widget is used to identify the widget for functions and methods.

<script type="text/javascript"> 
   var widgetname = new Spry.Widget.SlidingPanels("id of widget container");   
</script>

Constructor Options

Constructor options allow users to specify certain attributes of the widget.

Constructor options follow the ID parameter, wrapped in curly braces {}. Options are name:value pairs, separated by a colon (:).

 <script type="text/javascript"> 
   var widgetname = new Spry.Widget.SlidingPanels("id of widget container",{option1:value, option2:value, option3:"value"});   
 </script>
Option Values Default Description
defaultPanel number 0 The number of the panel that should show when the page loads.
duration number of milliseconds 500 milliseconds Defines how long it will take to move to the requested panel.
enableAnimation true or false true By default, the panel smoothly moves around. Setting enableAnimation:false will cause the panel to instantly show the requested panel, with no animation.
enableKeyboardNavigation true or false true By default, the Previous and Next arrow keys will move the panels. Setting this option to false will disable that ability.
fps number   This value determines the frames per second of the animation. This can be used to smooth the animation if needed.
 <script type="text/javascript"> 
   var ac1 = new Spry.Widget.SlidingPanels("mySlidingPanels",{defaultPanel:3, duration:200});   
 </script>

Recall that javascript is case sensitive.

Sliding Panels Methods

showPanel

Goes to the specified panel, using the panel number or the ID of the content container.

Format

widgetname.showPanel(panel number or container ID);

Example

<a href="#" onclick="sp1.showPanel(3);">Panel 3</a> 
 or
<a href="#" onclick="sp1.showPanel('panel3');">Panel 3</a> 

showFirstPanel

Goes to the first panel, that content that appears first in the markup.

Format

widgetname.showFirstPanel();

Example

 <a href="#" onclick="sp1.showFirstPanel();">First Panel</a>  

showLastPanel

Goes to the last panel, that content that appears last in the markup.

Format

widgetname.showLastPanel();

Example

 <a href="#" onclick="sp1.showLastPanel();">Last Panel</a>  

showNextPanel

Goes to the next panel.

Format

widgetname.showNextPanel();

Example

 <a href="#" onclick="sp1.showNextPanel();">Next Panel</a>  

showPreviousPanel

Goes to the previous panel.

Format

widgetname.showPreviousPanel();

Example

 <a href="#" onclick="sp1.showPreviousPanel();">Previous Panel</a>  

Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.