Sliding Panel
The Sliding Panel subcomponent is used by Fat Panel UI Options 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
Fat Panel UI Options
Tutorial - Fat Panel UI Options
|
|
|
|
|
|
|
Supported Events
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
Description |
This event fires after the sliding panel has been shown. |
---|---|
Type |
default |
Parameters |
none |
Availability |
Infusion 1.4 and later |
See also |
onPanelHide
Description |
This event fires immediately before the sliding panel is hidden. Note that this is not a preventable event. |
---|---|
Type |
default |
Parameters |
that |
Availability |
Infusion 1.4 and later |
See also |
onPanelShow
Description |
This event fires immediately before the sliding panel is shown. Note that this is not a preventable event. |
---|---|
Type |
default |
Parameters |
that |
Availability |
Infusion 1.4 and later |
See also |
Methods
hidePanel()
Description |
This method causes the sliding panel to close, hiding the contents. |
---|---|
Parameters |
none |
Availability |
Infusion 1.4 and later |
See also |
showPanel()
Description |
This method causes the sliding panel to open, revealing the contents. |
---|---|
Parameters |
none |
Availability |
Infusion 1.4 and later |
See also |
Options
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 |
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 |
Selectors
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" } |