Full Page UI Options (with Preview)
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 Full Page (with Preview) version of UI Options displays the UI Options controls in a standalone page, with a Preview pane that is updated as the user adjusts the controls.
See Also
Tutorial - Full Page UI Options (with Preview)
UI Options Instructional Demos
Full Page UI Options
Fat Panel UI Options
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.
Supported Events |
none |
---|---|
Methods |
none |
|
|
|
Creator
Use the following function to create a Full Page UI Options with Preview component:
Method |
|
---|---|
Description |
Instantiate a full-page version of the UI Options component, with a live Preview. |
Parameters |
|
Returns |
The Full Page (with Preview) UI Options component |
Examples |
var myUIO = fluid.uiOptions.fullPreview(#myContainer, { prefix: ".././components/uiOptions/html/" }); |
Notes |
 |
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.
var fullUIO = fluid.uiOptions.fullPreview(".myContainer", { <option1Name>: <option1value>, <option2Name>: <option2value> ... } });
The options supported by Full Page UI Options (with Preview) 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 |
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 |
preview
Description |
The |
---|---|
Default implementation |
|
Example |
fluid.uiOptions.fullPreview(".myContainer", { preview: { options: { templateUrl: "../templates/CustomPreviewTemplate.html" } } }); |
See also |
previewEnhancer
Description |
The |
---|---|
Default implementation |
|
Example |
fluid.uiOptions.fullPreview(".myContainer", { previewEnhancer: { options: { classnameMap: { theme: { "default": "site-theme" } } } } }); |
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 |