Versions Compared

Old Version 1

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

...

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

Div
classcomponent-api-page
Wiki Markup
Span
classsmall
Production Status: PREVIEW

Insert excerpt
_UIO and UIE overview
_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.| {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
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: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 
 
 Page 
 
 UI 
 
 Options
]\\
[

Full 
 
 Page 
 
 UI 
 
 Options 
 
 (with 
 
 Preview)
] |
{div2}

h2. Supported Events
{span:class=
Supported Events
 Span
classback-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
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>
    ...
}
});{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
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: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
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
            }
        }
    }
});

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

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

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

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

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

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

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

See also
UI Options