Child pages
  • Tutorial - UI Options and UI Enhancer

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Section
Column
width60%

This page will walk you through an example of adding the Fluid UI Options and UI Enhancer to a website.

This tutorial assumes that:

  • you are already familiar with HTML, Javascript and CSS
  • you are familiar with what the UI Options and UI Enhancer are and do
  • now you just want to know how to add them to your application.

UI Options requires UI Enhancer in order to apply the settings a user selects. UI Enhancer could be used alone in order to apply some effects to a page however its real power is when used in conjunction with UI Options. For more general information about UI Options see User Interface Options Version A Design Overview. For technical API documentation, see UI Options API and UI Enhancer API.

Tutorial: How to Use UI Options and UI Enhancer

Scenario

You'd like to allow visitors to customize the presentation of your website to their individual needs, such as enlarging the text, or increasing the visual contrast. This tutorial will show you how to use the Fluid UI Options in a dialog to do this.

The basic steps to add UI Options and UI Enhancer to your application are:

The rest of this tutorial will explain each of these steps in detail.

Column
Panel
borderColor#321137
bgColor#fff
titleBGColor#aab597
borderStylesolid
titleStatus
borderStylesolid

This component is in Preview status

solid
Panel
borderStyle
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
borderStylesolid
titleOn This Page
Table of Contents
toc
maxLevel
5
minLevel2
maxLevel5
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
borderStylesolid
titleSee Also
borderStylesolid
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
borderStylesolid
titleStill need help?
borderStylesolid

Join the infusion-users mailing list and ask your questions there.

...