Infusion DocumentationComponent APIsSliding Panel

This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Sliding Panel

Owned by Anastasia Cheetham
Last updated: Oct 11, 2013Version comment

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"
}