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

Include Page
_UIO new in 1.4
_UIO new in 1.4

Anchor
top
top

Div
classsummary-table

#Creator

fluid.uiOptions.fatPanel(container, options)

#Supported Events

#afterRender
Fires after the interface has been rendered into the iframe.

Methods

none

#Options

listeners
See #Supported Events for information.

#prefix
A relative path to templates.

selectors
See below

#Selectors

#iframe
The <iframe> element that will contain the UI Options controls.

#Configurable Subcomponents

#layoutControls
Renders the controls for customizing the layout of the page.

#linksControls
Renders the controls for customizing the appearance of links on the page.

#markupRenderer
Controls the rendering of the component into the iframe.

#slidingPanel
A hidden panel at the top of the page that contains the UI Options controls.

#templateLoader
Responsible for fetching HTML templates for the various controls.

#textControls
Renders the controls for customizing the appearance of text on the page.

#uiOptions
Responsible for the main rendering of the controls.

Creator

Span
classback-to-top
back to top

Use the following function to create a Fat Panel UI Options component:

Div
classapi-table

Method

fluid.uiOptions.fatPanel(container, options);

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

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 Fat Panel UI Options component

Examples

Code Block
javascript
javascript
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

Full Page UI Options
Full Page UI Options (with Preview)

Supported Events

Span
classback-to-top
back to top

Include Page
_supported events intro
_supported events intro

afterRender

Div
classapi-table

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

Span
classback-to-top
back to top

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

The options supported by Fat Panel UI Options are described below.

prefix

Include Page
_UIO prefix option
_UIO prefix option

selectors

Div
classapi-table

Description

See below for details.

Selectors

Span
classback-to-top
back to top

Include Page
_selectors intro
_selectors intro

The selectors supported by Fat Panel UI Options are described below.

iframe

Div
classapi-table

Description

The <iFrame> element that will be used to house the UI Options controls. This frame will be placed in a sliding panel at the top of the page.

Default

".flc-uiOptions-iframe"

Example

Code Block
javascript
javascript
fluid.uiOptions.fullPreview(".myContainer", {
    selectors: {
        iframe: "#uio-iframe"
    }
});

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

markupRenderer

Div
classapi-table

Description

The markupRenderer subcomponent controls the rendering of the component into the iframe.

Default implementation

fluid.uiOptions.renderIframe

Example

Code Block
javascript
javascript
fluid.uiOptions.fullPreview(".myContainer", {
    markupRenderer: {
        options: {
            styles: {
                containerFlex: ".my-flex-container"
            }
        }
    }
});

See also

Render IFrame

slidingPanel

Div
classapi-table

Description

The slidingPanel subcomponent is a hidden panel at the top of the page that contains the UI Options controls.

Default implementation

fluid.slidingPanel

Example

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

See also

Sliding Panel

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