| Section |
|---|
| Column |
|---|
| This page will walk you through an example of adding the Infusion Pager to your application. This tutorial assumes that: - you are already familiar with HTML, Javascript and CSS
- you are familiar with what the Pager is and does
- now you just want to know how to add it to your file.
For more general information about the Pager, see Pager. For technical API documentation, see Pager API. | Panel |
|---|
| borderColor | #566b30 |
|---|
| bgColor | #D3E3C4 |
|---|
| borderStyle | outset |
|---|
| VERSION: This tutorial is based on v1.3.1 of Infusion. If you are still using v1.3, try the 1.3 tutorial. |
You're implementing a roster for a large school, and since there are thousands of students at this school, you want the list of students to be paged. This tutorial will show you how to use the Infusion Pager for this. There are four basic steps to adding the Pager to your application: - Setup: Download and install the Fluid Infusion library
- Step 1: Prepare your markup
- Step 2: Write the script, setting the options
- Step 3: Add the script and styles to your HTML
The rest of this tutorial will explain each of these steps in detail. |
| Column |
|---|
| Panel |
|---|
| borderColor | #566b30 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #D3E3C4 |
|---|
| title | On This Page |
|---|
| borderStyle | solid |
|---|
| |
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #c1b7c3 |
|---|
| title | See Also |
|---|
| borderStyle | solid |
|---|
| |
| Include Page |
|---|
| Infusion13:Still Need Help panelInfusion13: |
|---|
| Still Need Help panel |
|---|
|
|
|
...
| Include Page |
|---|
| Infusion13:Tutorial SetupInfusion13: |
|---|
| Tutorial Setup |
|---|
|
...
...
NOTE that the InfusionAll.js file is minified - all of the whitespace has been removed, so it isn't really human-readable. If you're using the source distribution and you want to be able to debug the code, you'll want to include each of the required files individually. This would look like this:
| Include Page |
|---|
| Infusion13:Pager DependenciesInfusion13: |
|---|
| Pager Dependencies |
|---|
|
But all of these individual JavaScript files are not necessary to make it work - the InfusionAll.js file has everything you need.
...