This space is an archive space for documentation related to old versions of Fluid Infusion (i.e. versions before 1.3). For documentation related to the latest Infusion, see Infusion Documentation.
Tutorial - Pager 1.0 Migration
This page will walk you through the process of upgrading your existing 0.8 Pager implementation to the new 1.0 version. This tutorial assumes that
- you are already familiar with HTML, Javascript and CSS
- you are familiar with what Pager is and does
- you have an existing implementation of Pager that worked with the 0.8 Infusion release.
- you are using the default classes
Location Changes
With the directory restructuring comes the need to update your paths to our files.
If you use... |
The new path is... |
---|---|
../../fluid-components/js/fluid/Pager.js |
../../components/pager/js/Pager.js |
../../fluid-components/css/fluid.components.pagers.css |
../../components/pager/css/Pager.css |
Class Name Changes
For consistency, all classes used as selectors have been given an "flc-" prefix, and ones used for styling have an "fl-" prefix.
Selection
New |
Old |
---|---|
.flc-pager-links |
.pager.links |
.flc-pager-pageLink |
.page-link |
.flc-pager-pageLink-skip |
.page-link-skip |
.flc-pager-pageLink-disabled |
.page-link-disabled |
.flc-pager-previous |
.previous |
.flc-pager-next |
.next |
.flc-pager-top |
.pager-top |
.flc-pager-bottom |
.pager-bottom |
.flc-pager-summary |
.pager-summary |
.flc-pager-page-size |
.pager-page-size |
.flc-pager-sort-header |
th |
Styles Changed Programatically
New |
Old |
---|---|
.fl-pager-currentPage |
.current-page |
.fl-pager-disabled |
.disabled |
.fl-pager-tooltip |
.pager-tooltip |
.fl-pager-asc |
.fl-asc |
.fl-pager-desc |
.fl-desc |
Other Styles Used by Pager
Added |
---|
.fl-pager |
.fl-pager-current |
.fl-pager-data |
.fl-pager-links |
.fl-pager-ui |