Fat Panel UI Options
This documentation applies to v1.4 of UI Options.
For earlier versions, see
UI Options API.
Production Status: PREVIEW
The User Interface Options component (UI Options) works in conjunction with the User Interface Enhancer component (UI Enhancer) and the Fluid Skinning System (FSS) to adjust the user interface based on personal preferences:
- UI Options presents the user with controls for adjusting preferences.
- UI Enhancer is the engine that transforms pages according to the saved preferences.
The Fat Panel version of UI Options places the UI Options dialog in a collapsible panel at the top of the page, accessible through a button in the upper right corner of the page.
See Also
Tutorial - Fat Panel UI Options
UI Options Instructional Demos
Full Page UI Options
Full Page UI Options (with Preview)
UI Enhancer
New in 1.4
(October, 2011)
The UI Options component has been completely refactored in version 1.4:
- The component is now available in three versions: Full Page, Full Page with Preview, and Fat Panel.
- The interface has been completely redesigned.
- The API has been updated.
|
|
|
|
Methods |
none |
|
|
|
|
|
Creator
Use the following function to create a Fat Panel UI Options component:
Method |
|
---|---|
Description |
Instantiate a fat panel version of the UI Options component, which displays the controls in a sliding panel at the top of the page. |
Parameters |
|
Returns |
The Fat Panel UI Options component |
Examples |
var myFatPanel = fluid.uiOptions.fatPanel("#myContainer", { prefix: "../../components/uiOptions/html" }); |
Notes |
The Fat Panel UI Options uses the page itself as a live "preview:" As users adjust controls, the page is modified accordingly. |
See also |
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.
afterRender
Description |
This event fires after the UI Options controls have been rendered into the iframe. This event triggers the initialization of event handlers as well as the creation of the sliding panel. |
---|---|
Type |
default |
Parameters |
none |
Availability |
Infusion 1.4 and later |
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.
var fatPanelUIO = fluid.uiOptions.fatPanel(".myContainer", { <option1Name>: <option1value>, <option2Name>: <option2value> ... } });
The options supported by Fat Panel UI Options are described below.
prefix
Description |
The |
---|---|
Default |
"../html/" |
Example |
fluid.uiOptions.fullNoPreview("#myContainer", { prefix: "../../components/uiOptions/html/" }); |
Notes |
Note that if the Template Loader values do not use the |
See also |
selectors
Description |
See below for details. |
---|
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.
The selectors supported by Fat Panel UI Options are described below.
iframe
Description |
The |
---|---|
Default |
|
Example |
fluid.uiOptions.fullPreview(".myContainer", { selectors: { iframe: "#uio-iframe" } }); |
Configurable Subcomponents
Configurable subcomponents can be configured though the parent component's options by passing a JavaScript object containing options for the subcomponent:
parent.component.name(".myContainer", { <subcomponentName>: { options: { <subcomponent options> } } });
To learn about the specific options for each subcomponent, visit the default implementation's API page.
layoutControls
Description |
The |
---|---|
Default implementation |
|
Example |
fluid.uiOptions.fullPreview(".myContainer", { layoutControls: { options: { listeners: { onUIOptionsRefresh: myRefreshListener } } } }); |
See also |
linksControls
Description |
The |
---|---|
Default implementation |
|
Example |
fluid.uiOptions.fullPreview(".myContainer", { linksControls: { options: { listeners: { onUIOptionsRefresh: myRefreshListener } } } }); |
See also |
markupRenderer
Description |
The |
---|---|
Default implementation |
|
Example |
fluid.uiOptions.fullPreview(".myContainer", { markupRenderer: { options: { styles: { containerFlex: ".my-flex-container" } } } }); |
See also |
slidingPanel
Description |
The |
---|---|
Default implementation |
|
Example |
fluid.uiOptions.fullPreview(".myContainer", { slidingPanel: { options: { hideByDefault: false } } }); |
See also |
templateLoader
Description |
The |
---|---|
Default implementation |
|
Example |
fluid.uiOptions.fullPreview(".myContainer", { templateLoader: { options: { templates: { linksControls: "../templates/CustomLinksTemplate.html" } } } }); |
See also |
textControls
Description |
The |
---|---|
Default implementation |
|
Example |
fluid.uiOptions.fullPreview(".myContainer", { textControls: { options: { listeners: { onUIOptionsRefresh: myRefreshListener } } } }); |
See also |
uiOptions
Description |
The |
---|---|
Default implementation |
|
Example |
fluid.uiOptions.fullPreview(".myContainer", { uiOptions: { options: { autoSave: false } } }); |
See also |