This tutorial assumes that:
UI Options showcase demo ⇗
You're putting together a website that you know will have a diverse audience. You'd like to allow your visitors to customize the presentation of the site to their individual needs, by enlarging the text or increasing the visual contrast, for example. This tutorial will show you how to add the Infusion UI Options component to your site.
These are the basic steps to add UI Options to your website:
The rest of this tutorial will explain each of these steps in detail.
Step 1: Prepare your page
1a: The Sliding Panel
The UI Options component includes HTML templates for all the controls, so you don't need to create any HTML for them. You only need to add a small amount of markup to the top of your page to tell UI Options where to render itself.
Add the following markup as the first thing within your
The elements in this snippet all have particular class names attached to them, and it's important to keep them:
If you open this page in your browser now, you'll only see the button in the upper left corner, since we haven't set up the CSS, and UI Options isn't present on the page yet:
Note that it doesn't matter what text you put in the button: The UI Options component will add a label and update it to reflect whether or not the panel is currently open. You can configure the text that the component uses by setting its configuration parameters. (After you've finished the tutorial, check out the instructional demo Fat Panel UI Options - Custom Show-Hide Button for an example of configuring the button text.)
1b: The Table of Contents
One of the UI Options controls allows users to add a Table Of Contents to the top of the page. You need to add a placeholder
Where exactly on your page you put this <div> is up to you, but it will depend on the exact layout of your page. It should be pretty close to the top, so that it's easily visible and accessible quickly for keyboard-only users. You can, of course, add additional classes of your own to style the Table Of Contents to fit in with the look of your site.
Step 2: Add dependencies to the page
We'll also need the UI Options CSS files:
If you open this page in your browser now, you'll only see that the button has been styled differently: it is in the upper right corner and the font has been changed. You can also see the bar of the sliding panel. The button still doesn't do anything, since we still haven't added the UI Options component to the page.
Step 3: Add the UI Options component
The simplest way to add the UI Options component to your page is using a
Add the script block as shown below:
This script calls the
The selector for our UI Options will be the classname of the
The options tell the component about two things:
In the code above, the