This page has not yet been rewritten to reflect recent restructuring.

The Sliding Panel subcomponent is used by User Interface Options API to show and hide the UI Options controls at the top of a page. The options described on this page can be configured through the options of the main Fat Panel UI Options component.

Do not use this component directly. The information on this page should be use when customizing Fat Panel UI Options.

See Also
How To Configure The UI Options Sliding Panel
User Interface Options API
Tutorial - User Interface Options

#Supported Events	`#afterPanelHide` Fires after the sliding panel has closed. `#afterPanelShow` Fires after the sliding panel has opened. `#onPanelHide` Fires before the sliding panel closes. `#onPanelShow` Fires before the sliding panel opens.
#Methods	`#hidePanel()` Hides the sliding panel. `#showPanel()` Shows the sliding panel.
#Options	`#hideByDefault` A boolean indicating whether the panel should be hidden on initialization. `listeners` See #Supported Events for information. `selectors` See below. `#strings` An array of strings that will be displayed onscreen.
#Selectors	`#panel` The container for the sliding panel. `#toggleButton` The button used to trigger showing/hiding the panel.

Supported Events

back to top

Listeners can be attached to any supported events through a component's listeners option. Values can be a function reference (not a string function name) or an anonymous function definition, as illustrated below:

var myComponent = component.name("#myContainerID", {
    listeners: {
        eventName1: functionName,
        eventName2: function (params) {
            ...
        }
    }
});

For information on the different types of events, see Infusion Event System.

afterPanelHide

Description	This event fires after the sliding panel has been hidden.
Type	default
Parameters	none
Availability	Infusion 1.4 and later
See also	#afterPanelShow #onPanelHide

afterPanelShow

Description	This event fires after the sliding panel has been shown.
Type	default
Parameters	none
Availability	Infusion 1.4 and later
See also	#afterPanelHide #onPanelShow

onPanelHide

Description	This event fires immediately before the sliding panel is hidden. Note that this is not a preventable event.
Type	default
Parameters	that The Sliding Panel component object.
Availability	Infusion 1.4 and later
See also	#onPanelShow #afterPanelHide

onPanelShow

Description	This event fires immediately before the sliding panel is shown. Note that this is not a preventable event.
Type	default
Parameters	that The Sliding Panel component object.
Availability	Infusion 1.4 and later
See also	#onPanelHidden #afterPanelShow

Methods

back to top

hidePanel()

Description	This method causes the sliding panel to close, hiding the contents.
Parameters	none
Availability	Infusion 1.4 and later
See also	#showPanel()

showPanel()

Description	This method causes the sliding panel to open, revealing the contents.
Parameters	none
Availability	Infusion 1.4 and later
See also	#hidePanel()

Options

back to top

The second argument to the creator function is the options argument. This is a JavaScript object containing name/value pairs: The name is the name of the option and the value is the desired setting. Components define their own default values for options, but integrators can override these defaults by providing new values using the options argument. For technical information about how options are merged with defaults, see Options Merging.

hideByDefault

Description	A boolean indicating whether the panel should be hidden on initialization.
Default	true
Example	hideByDefault: false
See also	#hidePanel()

selectors

Description	See below.

strings

Description	An array of strings that will be displayed on the screen. These include the text displayed on the toggle button.
Default	strings: { showText: "+ Show Display Preferences", hideText: "- Hide" }
Example	strings: { showText: "v Open Display Preferences", hideText: "^ Close Display Preferences" }
Notes	The `showText` text will be used to label the button while the panel is hidden. The `hideText` text will be used to label the button while the panel is open.

Selectors

back to top

One of the options that can be provided to the component is a set of CSS-based selectors identifying where in the DOM different elements can be found. The value for the option is itself a Javascript object containing name/value pairs:

selectors: {
    selector1Name: "selector 1 string",
    selector2Name: "selector 2 string",
      ...
}

The component defines defaults for these selectors: If you use those defaults in your markup, you do not need to specify the selectors option. If you do choose to override any of the selectors, you can specify your custom selector using this option.

panel

Description	The container for the sliding panel
Default	".flc-slidingPanel-panel"
Example	selectors: { panel: "#prefsPanel" }

toggleButton

Description	The button used to trigger showing/hiding the panel.
Default	".flc-slidingPanel-toggleButton"
Example	selectors: { toggleButton: "input.prefsToggleButton" }

Browser not supported