Span |
---|
| 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. 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 |
---|
|
Div |
---|
| #Creator | fluid.uiOptions.fatPanel(container,
|
---|
| }} |
||[#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| {{CreatorUse the following function to create a Fat Panel UI Options component: Div |
---|
| Method | fluid.uiOptions.fatPanel(container,
|
---|
| }} |
||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 |
---|
| 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:" |
---|
| |
|| | [ ]\\
[ ] |
{div2}
h2. Supported Events
{span:class=Supported Events}[ 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} Include Page |
---|
| _supported events intro |
---|
| _supported events intro |
---|
|
afterRender
Div |
---|
| 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 Include Page |
---|
| _options intro |
---|
| _options intro |
---|
|
Code Block |
---|
|
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 |
---|
| Description | See below for details. |
---|
|
Selectors Include Page |
---|
| _selectors intro |
---|
| _selectors intro |
---|
|
The selectors supported by Fat Panel UI Options are described below. iframe
Div |
---|
| 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 |
---|
|
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 |
---|
| 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. 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}markupRenderer Div |
---|
| Description | The markupRenderer subcomponent controls the rendering of the component into the iframe. |
---|
Default implementation | fluid.uiOptions.renderIframe |
---|
Example | Code Block |
---|
|
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}slidingPanel Div |
---|
| 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 |
---|
|
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}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} |