{span:class=small}Production Status: PREVIEW{span}
{excerpt-include:_UIO and UIE overview|nopanel=true}
*See Also*
[Tutorial - Page Enhancer]
[Full Page UI Options]
[Full Page UI Options (with Preview)]
[Fat Panel UI Options]
*New in 1.4* {span:class=small}(September, 2011){span}
* Code refactored
* API changed
{anchor:top}
{div2:class=summary-table}
||[#Creators]| {{[#fluid.uiEnhancer(container, options)]}} \\
{{[#fluid.pageEnhancer(options)]}}|
||[#Supported Events]| {{[#onCreateTOCReady]}}\\
Fires when table of content can be created\\
\\
{{[#modelChanged]}}\\
Fires when any settings have changed |
||Methods| _none_ |
||[#Options]| {{[#classnameMap]}}\\
A mapping between controls and CSS classnames used for those preferences\\
\\
{{[#defaultSiteSettings]}}\\
Default values for each of the settings\\
\\
*{{listeners}}*\\
See [#Supported Events] for information.\\
\\
{{[#tocTemplate]}}\\
Path to the template file for the Table of Contents |
||[#Subcomponents]|{{[#settingsStore]}}\\
Provides access to the saved settings.\\
\\
{{[#tableOfContents]}}\\
Presents a links of links to headings on the page.|
{div2}
h2. Creators
{span:class=back-to-top}[back to top|#top]{span}
Use one of the following functions to create a UI Enhancer component:
h3. fluid.uiEnhancer(container, options)
{div2:class=api-table}
||Method| {{fluid.uiEnhancer(container, options);}} |
||Description| Instantiates a UI Enhancer component applied to the specified container. |
||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 UI Enhancer component |
||Examples| {code:javascript}var uie = fluid.uiEnhancer("#main");{code} |
||See also| [#fluid.pageEnhancer(options)] |
{div2}
h3. fluid.pageEnhancer(options)
{div2:class=api-table}
||Method| {{fluid.pageEnhancer(options);}} |
||Description| Instantiates a UI Enhancer component applied to the entire current page. |
||Parameters| _{{options}}_
An optional data structure that configures the UI Options component, as described below. |
||Returns| The UI Enhancer component |
||Examples| {code:javascript}var enhancer = fluid.pageEnhancer();{code} |
||See also| [#fluid.uiEnhancer(container, options)] |
{div2}
h2. Supported Events
{span:class=back-to-top}[back to top|#top]{span}
{include:_supported events intro}
h3. onCreateTOCReady
{div2:class=api-table}
||Description|This event fires when the "table of content" preference is turned on and the DOM is fully loaded. This event triggers the creation of the [Table of Contents] subcomponent. |
||Type| default |
||Parameters| _none_ |
||Availability| Infusion 1.4 and later |
{div2}
h3. modelChanged
{div2:class=api-table}
||Description|This event fires Fires when any settings have changed. |
||Type| default |
||Parameters| _newModel_\\
The overall model containing the user's current selections.\\
\\
_oldModel_\\
A "snapshot" of the previous state of the model, before the change.\\
\\
_changeRequest_\\
The original change request object.|
||Availability| Infusion 1.4 and later |
||See also| [Firing a change using a ChangeApplier|fluid:ChangeApplier#Firing a change using a ChangeApplier]|
{div2}
h2. Options
{span:class=back-to-top}[back to top|#top]{span}
{include:_options intro}
h3. classnameMap
{div2:class=api-table}
||Description|A mapping between controls and CSS classnames used for those preferences. The classnames defined using this option are applied to the document in response to user preferences.|
||Default| {code:javascript}classnameMap: {
"textFont": {
"default": "",
"times": "fl-font-times",
"comic": "fl-font-comic-sans",
"arial": "fl-font-arial",
"verdana": "fl-font-verdana"
},
"theme": {
"default": "",
"bw": "fl-theme-uio-hc fl-theme-hc",
"wb": "fl-theme-uio-hci fl-theme-hci",
"by": "fl-theme-uio-blackYellow fl-theme-blackYellow",
"yb": "fl-theme-uio-yellowBlack fl-theme-yellowBlack"
},
"layout": "fl-layout-linear",
"links": "fl-text-underline fl-text-bold fl-text-larger",
"inputsLarger": "fl-text-larger"
}{code} |
||Example| {code:javascript}var enh = fluid.pageEnhancer({
classnameMap: {
theme: {
"default": "my-custom-theme"
}
}
});{code}|
||Notes| If you have a custom theme for your site, you should use the {{classnameMap}} to set the default theme name.
||See also| [Tutorial - Page Enhancer]\\
[fluid:Fluid Skinning System (FSS)] |
{div2}
h3. fontSizeMap
{div2:class=api-table}
||Description|A mapping between string values of "font-size" and the actual numerical values in px. The option is necessary for "Text Size" preference working properly in IE6 & IE7.|
||Default| {code:javascript}fontSizeMap: {
"xx-small": "9px",
"x-small": "11px",
"small": "13px",
"medium": "15px",
"large": "18px",
"x-large": "23px",
"xx-large": "30px"
}{code} |
||Example| {code:javascript}var enh = fluid.pageEnhancer({
fontSizeMap: {
theme: {
"medium": "16px"
}
}
});{code}|
||Notes| The actual numerical value translations of the "font-size" string values vary depending on the OS display setting. If your computer is set to view in larger or smaller font, you need to adjust the mapping{fontSizeMap} to the desired mapped-to values.
||See also| [Tutorial - Page Enhancer]
[fluid:Fluid Skinning System (FSS)]
[CSS font-size Property|http://www.w3schools.com/cssref/pr_font_font-size.asp]\\ [fluid:Fluid Skinning System (FSS)] |
{div2}
h3. px2emFactor
{div2:class=api-table}
||Description|A factor to convert px value to em value. This value is used by "Text Size" preference to adjust body "font-size" in em|
||Default| {code:javascript}16{code} |
||Example| {code:javascript}var enh = fluid.pageEnhancer({
px2emFactor: "10"
});{code}|
||Notes| If you have a custom theme for your site, you should use the {{classnameMap}} to set the default theme nameThe factor varies depending on the "font-size" set on <body>. Refer to [PX to EM conversion|http://pxtoem.com/] to adjust the factor value to what you need.
||See also| [Tutorial - Page Enhancer]
[fluid:Fluid Skinning System (FSS)]
[PX to EM conversion|http://pxtoem.com/]\\
[fluid:Fluid Skinning System (FSS)] |
{div2}
h2. Subcomponents
{include:_subcomponents intro|nopanel=true}
h3. settingsStore
{div2:class=api-table}
||Description| The {{settingsStore}} subcomponent ...|
||Default implementation| {{[fluid.cookieStore|Settings Store]}} |
||Example| {code:javascript}
fluid.uiEnhancer(".myContainer", {
components: {
settingsStore: {
options: {
cookie: {
expires: "Mon, 31 Dec 2012 23:59:00 UTC"
}
}
}
}
});
{code} |
||See also|[Cookie Settings Store] |
{div2}
h3. tableOfContents
{div2:class=api-table}
||Description| The {{settingsStore}} subcomponent ...|
||Default implementation| {{[fluid.tableOfContents|Table of Contents]}} |
||Example| {code:javascript}
fluid.pageEnhancer(".myContainer", {
components: {
tableOfContents: {
options: {
selectors: {
tocContainer: ".custom-tocContainer"
}
}
}
}
});
{code} |
||See also|[Table of Contents] |
{div2}
|