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} [!fullPagePreviewUIO-small.png\|border=1!\|^fullPagePreviewUIO.png] {div}

{div:class=component-api-page} {span:class=small}Production Status: PREVIEW{span} {excerpt-include:_UIO and UIE overview|nopanel=true} 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:_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 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.

Include Page

	_UIO new in 1.4
	_UIO new in 1.4

Anchor

	top
	top

Div

class	summary-table

#Creator	`fluid.uiOptions.fullPreview(container,`

options)

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


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

class	back-to-top

back to top

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

Div

class	api-table

Method	`fluid.uiOptions.fullPreview(container,`

options);

}} | ||Description| Instantiate a


Description	Instantiate a full-page

version

of

the

UI

Options

component,

with

a

live

Preview.

| ||Parameters| _{{container}}_\\ A


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

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

{code} | ||Notes| | ||See also| [Full Page UI Options]\\ [Fat Panel UI Options] | {div2} h2. Options {span:class=

Notes

Options

Span

class	back-to-top

}[

back

to

top|#top]{span} {include:_options intro} {code:javascript}

top

Include Page

	_options intro
	_options intro

Code Block

	javascript
	javascript


var fullUIO = fluid.uiOptions.fullPreview(".myContainer", {
    <option1Name>: <option1value>,
    <option2Name>: <option2value>
    ...
}
});

{code} The options supported by Full Page UI Options (with Preview) are described below. h3. prefix {include:_UIO prefix option} 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}

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

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. preview {div2:class=api-table} ||Description| The {{preview}} subcomponent is responsible for rendering the live preview. | ||Default implementation| {{[fluid.uiOptions.preview|Preview]}} | ||Example| {code:javascript}

See also

Links Controls

preview

Div

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

{code} | ||See also|[Preview] | {div2} h3. previewEnhancer {div2:class=api-table} ||Description| The {{previewEnhancer}} subcomponent is the UI Enhancer that is applied to the preview. | ||Default implementation| {{[fluid.uiEnhancer|UI Enhancer]}} | ||Example| {code:javascript}

See also

Preview

previewEnhancer

Div

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

{code} | ||See also|[UI Enhancer] | {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

UI Enhancer

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

Options

prefix

Configurable Subcomponents

layoutControls

linksControls

preview

previewEnhancer

templateLoader

textControls

uiOptions