Page Comparison

Wiki Markup
{div:class=floatRight} {info}This documentation applies to {color:purple}v1.4{color} of UI Options. For earlier versions, see [fluid:UI Options API].{info} {div}

Wiki Markup
{div:class=floatRight} [!fatPanelUIO-small.png\|border=1!\|^fatPanelUIO.png] {div}

{div:class=component-api-page} {span:class=small}Production Status: PREVIEW{span} {excerpt-include:_UIO and UIE overview|nopanel=true} 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:_UIO new in 1.4} {anchor:top} {div2:class=summary-table} ||[#Creator]| {{

Wiki Markup

Div

class	floatRight

Info
This documentation applies to v1.4 of UI Options. For earlier versions, see UI Options API.

Div

class	floatRight

Image Added

Div

class	component-api-page

Span

class	small

Production Status: PREVIEW

Insert excerpt

	_UIO and UIE overview
nopanel	true
	_UIO and UIE overview

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.

Include Page

	_UIO new in 1.4
	_UIO new in 1.4

Anchor

	top
	top

Div

class	summary-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.| {div2} h2. Creator {span:class=back-to-top}[back to top|#top]{span} Use the following function to create a Fat Panel UI Options component: {div2:class=api-table} ||Method| {{


#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

class	back-to-top

back to top

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

Div

class	api-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:javascript}

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"
});

{code} | ||Notes| The Fat Panel UI Options uses the page itself as a live

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

]\\ [

] | {div2} h2. Supported Events {span:class=

Supported Events

Span

class	back-to-top

}[

back

to

top|#top]{span} {include:_supported events intro} h3. {{afterRender}} {div2:class=api-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 | {div2} h2. Options {span:class=back-to-top}[back to top|#top]{span} {include:_options intro} {code:javascript}

top

Include Page

	_supported events intro
	_supported events intro

`afterRender`

Div

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

class	back-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>
    ...
}
});

{code} The options supported by Fat Panel UI Options are described below. h3. prefix {include:_UIO prefix option} h3. {{selectors}} {div2:class=api-table} ||Description|See below for details. | {div2} h2. Selectors {span:class=back-to-top}[back to top|#top]{span} {include:_selectors intro} The selectors supported by Fat Panel UI Options are described below. h3. {{iframe}} {div2:class=api-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| {{

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

prefix

Include Page

	_UIO prefix option
	_UIO prefix option

`selectors`

Div

class	api-table

Description	See below for details.

Selectors

Span

class	back-to-top

back to top

Include Page

	_selectors intro
	_selectors intro

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

`iframe`

Div

class	api-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:javascript}

Example

Code Block

	javascript
	javascript


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

{code} | {div2} h2. Configurable Subcomponents {include:_configurable subcomponents intro} To learn about the specific options for each subcomponent, visit the default implementation's API page. h3. layoutControls {div2:class=api-table} ||Description| The {{layoutControls}} subcomponent renders the controls for customizing the layout of the page.| ||Default implementation| {{[fluid.uiOptions.layoutControls|Layout Controls]}} | ||Example| {code:javascript}

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

class	api-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
            }
        }
    }
});

{code} | ||See also|[Layout Controls] | {div2} h3. linksControls {div2:class=api-table} ||Description| The {{linksControls}} subcomponent renders the controls for customizing the appearance of links on the page.| ||Default implementation| {{[fluid.uiOptions.linksControls|Links Controls]}} | ||Example| {code:javascript}

See also

Layout Controls

linksControls

Div

class	api-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
            }
        }
    }
});

{code} | ||See also|[Links Controls] | {div2} h3. markupRenderer {div2:class=api-table} ||Description| The {{markupRenderer}} subcomponent controls the rendering of the component into the iframe. | ||Default implementation| {{[fluid.uiOptions.renderIframe|Render IFrame]}} | ||Example| {code:javascript}

See also

Links Controls

markupRenderer

Div

class	api-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"
            }
        }
    }
});

{code} | ||See also|[Render IFrame] | {div2} h3. slidingPanel {div2:class=api-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|Sliding Panel]}} | ||Example| {code:javascript}

See also

Render IFrame

slidingPanel

Div

class	api-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
        }
    }
});

{code} | ||See also|[Sliding Panel] | {div2} h3. templateLoader {div2:class=api-table} ||Description| The {{templateLoader}} subcomponent is responsible for fetching HTML templates for the various controls. | ||Default implementation| {{[fluid.uiOptions.templateLoader|Template Loader]}} | ||Example| {code:javascript}

See also

Sliding Panel

templateLoader

Div

class	api-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"
            }
        }
    }
});

{code} | ||See also|[Template Loader] | {div2} h3. textControls {div2:class=api-table} ||Description| The {{textControls}} subcomponent renders the controls for customizing the appearance of text on the page.| ||Default implementation| {{[fluid.uiOptions.textControls|Text Controls]}} | ||Example| {code:javascript}

See also

Template Loader

textControls

Div

class	api-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
            }
        }
    }
});

{code} | ||See also|[Text Controls] | {div2} h3. uiOptions {div2:class=api-table} ||Description| The {{uiOptions}} subcomponent is responsible for the main rendering of the controls. | ||Default implementation| {{[fluid.uiOptions|UI Options]}} | ||Example| {code:javascript}

See also

Text Controls

uiOptions

Div

class	api-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
        }
    }
});

{code} | ||See also|[UI Options] | {div2} {div}

See also

UI Options

Versions Compared

Old Version 2

New Version 3

Key

Creator

Supported Events

`afterRender`

Options

prefix

`selectors`

Selectors

`iframe`

Configurable Subcomponents

layoutControls

linksControls

markupRenderer

slidingPanel

templateLoader

textControls

uiOptions