{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]| {{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| {{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}var myFatPanel = fluid.uiOptions.fatPanel("#myContainer", {
prefix: "../../components/uiOptions/html"
});{code} |
||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=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}
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| {{".flc-uiOptions-iframe"}} |
||Example| {code: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}
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}
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}
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}
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}
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}
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}
fluid.uiOptions.fullPreview(".myContainer", {
uiOptions: {
options: {
autoSave: false
}
}
});
{code} |
||See also|[UI Options] |
{div2}
{div} | 