0.1.0 • Published 8 years ago
paginatejs v0.1.0
PaginateJs
A micro plugin for adding quickly pagination to any kind of element.
Simply this lib enables you to create an paginatination with any kind of element. Really simple with nearly zero configuration.
Advantages
- ~3KB
- without jQuery
- easy-to-use
Usage
- Require the lib
<script type="text/javascript" src="./dist/paginate.min.js"></script>
- Create container regarding pagination
<!-- the container with the elements to be paginated (in this case a simple list)-->
<ul id="container">
<li>Entry #1</li>
<li>Entry #2</li>
<li>Entry #3</li>
<li>Entry #4</li>
<li>Entry #5</li>
<li>Entry #6</li>
</ul>
<!-- the container that contains the page links -->
<div id="pagination"></div>
- Initialize plugin
paginateJs({
container: document.getElementById('container'), // REQUIRED - the container with the elements that'll paginated as children
pagination: document.getElementById('pagination'), // REQUIRED - the container holding the page links
size: 3, // OPTIONAL (default=5) - how many elements on one page
captions: // OPTIONAL - holds the captions for "special" buttons
{
prev: '<', // OPTIONAL (default='<') - the previous button caption
next: '>' // OPTIONAL (default='>') - the next button caption
},
prev: function (next_page_id) {}, // OPTIONAL - the callback that's triggered on previous change click
next: function (next_page_id) {}, // OPTIONAL - the callback that's triggered on next change click
change: function next_page_id) {}, // OPTIONAL - the callback that's triggered on page change (NOT prev OR next ONLY direct page change)
page_link: function () // OPTIONAL - the link creation function to replace the original link creation to return element of your choice
{
return document.createElement('button')
},
page: function () // OPTIONAL - the page creation function to replace the original page createion to return element of your choice
{
return document.createElement('section')
}
});
- Reload page see how the pagination is built. :)
INFO
Currently the plugin doesn't support reducing of the buttons, so EVERY page button that is created is visible. Possibly implemented in future version.
0.1.0
8 years ago