jQuery Mobile Pagination Plugin

jQuery Mobile PaginationScreenshotIt’s been a little while since we’ve released any code examples here in the FG Lab, so today we’re happy to present a new jQuery Mobile plugin called Pagination: a jQuery Mobile plugin for sequential pagination between pages with support for touch, mouse, and keyboard!

The Pagination plugin creates touch-drag navigation between separate HTML pages. Simply add this plugin to your page and link together documents via ordinary HTML anchors. The linked pages will pre-fetch, and in browsers that support touch events, you’ll be able to drag between the linked pages, while desktop users can navigate with mouse or keyboard. Like all navigation in jQuery Mobile, this plugin ties into your browser’s history, so bookmarking, and using the browser’s back and forward buttons work as expected!

A Quick Demo

The following is a demo of the pagination plugin. There are 4 separate pages linked in the demo. On touch devices, you can drag between the pages. Note that this plugin works with any HTML page content, though we made a series of photos for demo purposes.

jQuery Mobile Pagination Demo

How it works

This plugin requires jQuery and jQuery Mobile. It doesn’t require the whole jQM framework though, so we’ll try and document the specifics for that later on.

To Use:

  1. Reference jquery.mobile.pagination.css and jquery.mobile.pagination.js from your page.
  2. Place the following markup somewhere inside each document that you want to make draggable. The links should point to the next and previous pages.
<ul data-role="pagination">
    <li class="ui-pagination-prev"><a href="2.html">Prev</a></li>
    <li class="ui-pagination-next"><a href="4.html">Next</a></li>
</ul>

That’s it! You can link a series of pages together by placing that markup in the body of each page, pointing to the next and previous pages for each one, respectively.

Download, Fork on Github!

This code is open source and free to download and use on any projects, via the MIT or GPL licenses, like jQuery Mobile itself. You can grab it on Github:

jQM Pagination on Github

Support

The keyboard and mouse/tap support should work in pretty much any browser or device, following jQuery Mobile’s browser support grades. The touch gestures tested well on all iOS devices, Android 2.2 and 2.3 phones and tablets. Android 2.1 and Blackberry Playbook support is a little flakey, but the pages are navigable via the arrow links as a fallback in any browser.

Got ideas or improvements? Please fork and contribute!

All blog posts