This documentation refers to the latest trunk version of the <Component> code.
This page will walk you through an example of adding the Fluid <Component> component to an HTML file.
This tutorial assumes that:
- you are familiar with what the <Component> is and does
- now you just want to know how to add it to your file.
Tutorial: How to Use the <Component>
<Describe the real-world scenario that is the basis of the tutorial.> This tutorial will show you how to use the Fluid <Component> for this.
There are four basic steps to adding the <Component> to your application:
- Step 0: Download and install the Fluid Infusion library
- Step 1: Prepare your markup
- Step 2: Write the script
- Step 3: Add the script to your HTML
- Step 4: Apply styles
The rest of this tutorial will explain each of these steps in detail.
Step 0: Download and install the Fluid Infusion library
- Download a copy of the Fluid Infusion component library from:
You only really need the "Minified deployment package," but if you want to actually look at the code, you should download the "Source package."
- Unpack the zip file you just downloaded, and place the resulting folder somewhere convenient for your development purposes.
The folder will have the release number in it's name (e.g.
fluid-0.4/). The rest of this tutorial will use
fluid-0.4in its examples, but if you downloaded a different version, you'll have to adjust.
Step 1: Prepare your markup
Let's assume that you're starting with an HTML file, called
In a browser window, this might look something like this:
<screenshot of page here>
The <Component> needs to know about the 'container' of .... In this case, <...> would be the container... We'll attach unique IDs each of these so that we'll be able to identify them to the <Component>:
That's all - these are the only changes you need to make to your HTML.
Step 2: Write the script
You'll need to create a file, say
filename, to contain your initialization script - the script you write to apply the <Component> to your <stuff>.
In this file, write a function that <...>:
<explain the function>
<any caveats about selectors, and the fact that any selector will do, not just the one in the example.>
Step 3: Add the script to your HTML
That's it! That's all you need to do to add the <...> functionality to your document.
BUT: If you look at the file in a browser now, it doesn't look any different than it looked before - there's no way to tell that <...>. That's what the styles are for.
Step 4: Apply styles
There are a number of "interesting moments" that happen while <...>. These include, for example, <...>
The styles in the example below are just that: examples. You are free to create whatever styles you like <...>. The important thing to understand is
- what the interesting moments are, and
- what the names of the styles for those moments are