The pager plugin creates paginated content and automatically adds the pagination links. The pagination links can be customized so that you can show as little or as much detail as needed.
To use the pager plugin, you will need a parent container element with a class of pager.
For each page that you'd like to include, create a child container with a class of
page.
The level of detail for the pagination links is controlled with the data-style
attribute, which is applied to the parent container element.
When a new page is loaded, the plugin will also trigger the change event, detailed
below. Use this if, for example, you'd like to autoplay the next video or slide in a series.
| Option | Description | Required | Default | Values |
|---|---|---|---|---|
data-style |
The style for the pagination widget. | optional | numeric | numeric | directional | partial | full |
If you want to tie in additional functionality when the content changes, add a MooTools event listener to the page container:
| Event | Description |
|---|---|
change |
The change event is fired on the .pager element when a new page is
revealed. |
In odio libero, mollis non ultrices vel, venenatis et erat. Mauris facilisis fermentum neque, quis vestibulum est pulvinar congue. In ac cursus purus. Vestibulum volutpat, quam quis molestie porta, quam mi imperdiet elit, non blandit velit nulla sit amet nunc.
Integer libero elit, aliquam a pharetra at, varius mattis tortor. Vivamus in urna nulla, eu ultricies felis. Maecenas dolor nisi, faucibus non accumsan vitae, condimentum nec arcu.
Vivamus a felis sit amet enim hendrerit luctus sed eget justo. Sed ut nisi ac orci hendrerit feugiat id vel ipsum. Nulla et fermentum diam.
Maecenas dolor nisi, faucibus non accumsan vitae, condimentum nec arcu. Vestibulum interdum, massa adipiscing sagittis ornare, felis dolor congue felis, sed suscipit diam lectus eu lectus. Quisque ut risus leo. Nullam posuere porta lacus sit amet sodales. Mauris eget aliquam ligula.
<div class="pager" data-style="full"> <div class="page"> <h6>Page 1</h6> <p>In odio libero, mollis non ultrices vel, venenatis et erat. Mauris facilisis fermentum neque, quis vestibulum est pulvinar congue. In ac cursus purus. Vestibulum volutpat, quam quis molestie porta, quam mi imperdiet elit, non blandit velit nulla sit amet nunc.</p> </div> <div class="page"> <h6>Page 2</h6> <p>Integer libero elit, aliquam a pharetra at, varius mattis tortor. Vivamus in urna nulla, eu ultricies felis. Maecenas dolor nisi, faucibus non accumsan vitae, condimentum nec arcu.</p> </div> <div class="page"> <h6>Page 3</h6> <p>Vivamus a felis sit amet enim hendrerit luctus sed eget justo. Sed ut nisi ac orci hendrerit feugiat id vel ipsum. Nulla et fermentum diam.</p> </div> <div class="page"> <h6>Page 4</h6> <p>Maecenas dolor nisi, faucibus non accumsan vitae, condimentum nec arcu. Vestibulum interdum, massa adipiscing sagittis ornare, felis dolor congue felis, sed suscipit diam lectus eu lectus. Quisque ut risus leo. Nullam posuere porta lacus sit amet sodales. Mauris eget aliquam ligula.</p> </div> </div>
The following JavaScript isn't necessary to make the pager work, it's just to show how to detect the
page change event.
$$('.pager').addEvent('change', function(){
var target = $('target');
target.set('text', 'New page has been loaded!').fade('show').highlight();
target.fade.delay(2000, target, 'out');
});
VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.