Versions Compared

Old Version 3

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version Current

changes.mady.by.user Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Div
classcomponent-api-page

Span
classsmall
Production Status: PREVIEW

Insert excerpt
_UIO and UIE overview
nopaneltrue
_UIO and UIE overview
nopaneltrue

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

Include Page
_UIO new in 1.4
_UIO new in 1.4

Anchor
top
top

Div
classsummary-table

#Creator

fluid.uiOptions.fullPreview(container, options)

Supported Events

none

Methods

none

#Options

#prefix
A relative path to templates.

#Configurable Subcomponents

#layoutControls
The layoutControls subcomponent renders the controls for customizing the layout of the page.

#linksControls
The linksControls subcomponent renders the controls for customizing the appearance of links on the page.

#preview
The preview subcomponent is responsible for rendering the live preview.

#previewEnhancer
The previewEnhancer subcomponent is the UI Enhancer for the preview.

#templateLoader
The templateLoader subcomponent is responsible for fetching HTML templates for the various controls.

#textControls
The textControls subcomponent renders the controls for customizing the appearance of text on the page.

#uiOptions
The uiOptions subcomponent is responsible for the main rendering of the controls.

Creator

Span
classback-to-top
back to top

Use the following function to create a Full Page UI Options with Preview component:

Div
classapi-table

Method

fluid.uiOptions.fullPreview(container, options);

Description

Instantiate a full-page version of the UI Options component, with a live Preview.

Parameters

container
A CSS-based selectors, single-element jQuery object, or DOM element that identifies the root DOM node where the UI Options interface should be placed.

options
An optional data structure that configures the UI Options component, as described below.

Returns

The Full Page (with Preview) UI Options component

Examples

Code Block
javascript
javascript
var myUIO = fluid.uiOptions.fullPreview(#myContainer, {
    prefix: ".././components/uiOptions/html/"
});

Notes

 

See also

Full Page UI Options
Fat Panel UI Options

Options

Span
classback-to-top
back to top

Include Page
_options intro
_options intro
Code Block
javascript
javascript
var fullUIO = fluid.uiOptions.fullPreview(".myContainer", {
    <option1Name>: <option1value>,
    <option2Name>: <option2value>
    ...
}
});

The options supported by Full Page UI Options (with Preview) are described below.

prefix

Include Page
_UIO prefix option
_UIO prefix option

Configurable Subcomponents

Include Page
_configurable subcomponents intro
_configurable subcomponents intro

To learn about the specific options for each subcomponent, visit the default implementation's API page.

layoutControls

Div
classapi-table

Description

The layoutControls subcomponent renders the controls for customizing the layout of the page.

Default implementation

fluid.uiOptions.layoutControls

Example

Code Block
javascript
javascript
fluid.uiOptions.fullPreview(".myContainer", {
    layoutControls: {
        options: {
            listeners: {
                onUIOptionsRefresh: myRefreshListener
            }
        }
    }
});

See also

Layout Controls

linksControls

Div
classapi-table

Description

The linksControls subcomponent renders the controls for customizing the appearance of links on the page.

Default implementation

fluid.uiOptions.linksControls

Example

Code Block
javascript
javascript
fluid.uiOptions.fullPreview(".myContainer", {
    linksControls: {
        options: {
            listeners: {
                onUIOptionsRefresh: myRefreshListener
            }
        }
    }
});

See also

Links Controls

preview

Div
classapi-table

Description

The preview subcomponent is responsible for rendering the live preview.

Default implementation

fluid.uiOptions.preview

Example

Code Block
javascript
javascript
fluid.uiOptions.fullPreview(".myContainer", {
    preview: {
        options: {
            templateUrl: "../templates/CustomPreviewTemplate.html"
        }
    }
});

See also

Preview

previewEnhancer

Div
classapi-table

Description

The previewEnhancer subcomponent is the UI Enhancer that is applied to the preview.

Default implementation

fluid.uiEnhancer

Example

Code Block
javascript
javascript
fluid.uiOptions.fullPreview(".myContainer", {
    previewEnhancer: {
        options: {
            classnameMap: {
                theme: {
                    "default": "site-theme"
                }
            }
        }
    }
});

See also

UI Enhancer

templateLoader

Div
classapi-table

Description

The templateLoader subcomponent is responsible for fetching HTML templates for the various controls.

Default implementation

fluid.uiOptions.templateLoader

Example

Code Block
javascript
javascript
fluid.uiOptions.fullPreview(".myContainer", {
    templateLoader: {
        options: {
            templates: {
                linksControls: "../templates/CustomLinksTemplate.html"
            }
        }
    }
});

See also

Template Loader

textControls

Div
classapi-table

Description

The textControls subcomponent renders the controls for customizing the appearance of text on the page.

Default implementation

fluid.uiOptions.textControls

Example

Code Block
javascript
javascript
fluid.uiOptions.fullPreview(".myContainer", {
    textControls: {
        options: {
            listeners: {
                onUIOptionsRefresh: myRefreshListener
            }
        }
    }
});

See also

Text Controls

uiOptions

Div
classapi-table

Description

The uiOptions subcomponent is responsible for the main rendering of the controls.

Default implementation

fluid.uiOptions

Example

Code Block
javascript
javascript
fluid.uiOptions.fullPreview(".myContainer", {
    uiOptions: {
        options: {
            autoSave: false
        }
    }
});

See also

UI Options