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:

• fluid:Setup
• Step 1: Prepare your markup
• Step 2: Add dependencies to the markup
• Step 3: Write the script to create a UI Enhancer
• Step 4: Write the script to create a UI Options
• Step 5: Create the preview
• Step 6 (Optional): Use an accordian to simplify the interface
• Step 7 (Optional): Turn UI Options into a dialog
• Step 8 (Optional): Add UI Enhancer to other pages on your site

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