MooTools Pager Class
Recently, I had the need to do custom paging on an element with Javascript, and after hacking it together in a hurry, I realized that this might come in handy in other situations. So I cleaned it up a little and rewrote it as a MooTools class, and thus I present to you the MooTools Pager class.
Basic usage is simple, and the requirements are limited to MooTools (tested with version 1.2.3) with the Selectors and Fx plugins. The plugin takes a wide element wrapped within an element with a smaller fixed width and creates a clickable list of pages and previous/next links – think carousel, but more content focused. If you set the overflow-x on your element to scroll, the class will override it when it’s instantiated and users will still be able to use your site with Javascript disabled.
The class sets up basic HTML, with fancy styling left to the CSS. Actuators (the list of pages) get the class pager-actuator, previous and next links get the class paging-prev and paging-next respectively, and each gets the class active when they are active (or available, in the case of previous and next).
Basic Usage:
-
pager = new Pager(wrapper_el, paging_el, options);
Options, defaults are in brackets:
- innerElement: Selector for the element to be shifted for scrolling ['.scroller']
- actuatorFormat: The format for page links, can be ‘number’ (1, 2, 3…), ‘alpha’ (A, B, C….), or ‘none’ ['number']
- showPrevNext: Whether to show the previous and next elements [true]
- prevSymbol: Symbol to use for the previous element ['<']
- nextSymbol: Symbol to use for the next element ['>']
- pageLimit: Maximum number of pages, 0 is unlimited [0]
- actuatorType: DOM Element type to use for actuators ['span']
- transition: Transition to use when scrolling [Fx.Transitions.Cubic.easeOut]
- duration: Duration for scrolling animation in milliseconds [500]
See an example of the class in use, or head to GitHub for more details, example usage, and to download.
