Span |
---|
| 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. 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 |
---|
| |#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.
|
---|
|
CreatorUse the following function to create a Full Page UI Options with Preview component: Div |
---|
| Method | fluid.uiOptions.fullPreview(container,
|
---|
| }} |
||Description| Instantiate a | Description | Instantiate a full-page |
---|
| |
||Parameters| _{{container}}_\\
A | Parameters | container A CSS-based |
---|
| \\
\\
_{{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 |
---|
| 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=Options}[ top|#top]{span}
{include:_options intro}
{code:javascript} Include Page |
---|
| _options intro |
---|
| _options intro |
---|
|
Code Block |
---|
|
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 |
---|
| Description | The layoutControls subcomponent renders the controls for customizing the layout of the page. |
---|
Default implementation | fluid.uiOptions.layoutControls |
---|
Example | Code Block |
---|
|
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}linksControls Div |
---|
| Description | The linksControls subcomponent renders the controls for customizing the appearance of links on the page. |
---|
Default implementation | fluid.uiOptions.linksControls |
---|
Example | Code Block |
---|
|
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}preview Div |
---|
| Description | The preview subcomponent is responsible for rendering the live preview. |
---|
Default implementation | fluid.uiOptions.preview |
---|
Example | Code Block |
---|
|
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}previewEnhancer Div |
---|
| Description | The previewEnhancer subcomponent is the UI Enhancer that is applied to the preview. |
---|
Default implementation | fluid.uiEnhancer |
---|
Example | Code Block |
---|
|
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}templateLoader Div |
---|
| Description | The templateLoader subcomponent is responsible for fetching HTML templates for the various controls. |
---|
Default implementation | fluid.uiOptions.templateLoader |
---|
Example | Code Block |
---|
|
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}textControls Div |
---|
| Description | The textControls subcomponent renders the controls for customizing the appearance of text on the page. |
---|
Default implementation | fluid.uiOptions.textControls |
---|
Example | Code Block |
---|
|
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}uiOptions Div |
---|
| Description | The uiOptions subcomponent is responsible for the main rendering of the controls. |
---|
Default implementation | fluid.uiOptions |
---|
Example | Code Block |
---|
|
fluid.uiOptions.fullPreview(".myContainer", {
uiOptions: {
options: {
autoSave: false
}
}
});
|
|
---|
| {code} |
||See also|[UI Options] |
{div2}
{div} |