jQuery Mobile Pagination Plugin

Posted by Scott on 08/24/2011

jQuery Mobile Pagination
ScreenshotIt'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!

Comments

Excellent!

Comment by Jason Haag on 08/25  at  10:32 AM

Good work! I’ve been following your blog since one year - so I hope next time it will take not a “little while” ;)

Comment by Altersverifikation on 08/25  at  10:46 AM

MAC: safari: ok chrome: not ok (nothing shown)
PC: safari and chrome: ok

“strange but true”
Latest versions of browsers used (not beta)

Comment by Owen on 08/26  at  01:46 AM

Download and it runs :)

Comment by DJ Berlin Hochzeit on 08/26  at  04:50 PM

Simple, clean and lightweight! Thanks for this, I can’t wait to try it out.

Comment by Fred Campbell on 08/29  at  05:29 AM

Excellent.  Very nice work.  I like the clean html and ability to use it for photos or any content.  Perfectly flexible slider.

Muchas gracias.  I send you a virtual beverage of your choice !

Comment by Brent on 08/29  at  09:20 AM

Just wonderin if this is available to WordPress…

Nice plugin though! Keep them coming..

Comment by Fred on 08/30  at  12:31 PM

Looks really promising. Rolling it into WordPress is ridiculously easy, but results are equally buggy. Tested on Android 2.2 mobile browser and iOS Safari and results were too buggy to be usable. Also doesn’t degrade nicely. If you browse to your demo pages using Google Chrome, Chrome just locks up and eventually times out. (13.0.782)

This looks like a very promising library, and maybe the instability issues have more to do with jquery-mobile than jqm-pagination. Keep up the good work and be sure to let us know when a more stable release is available!

Contact me if you’d like me to point you to the sandbox test that I used.

Comment by Tom Auger on 09/02  at  02:34 PM

Hi Get script, not sure if you know that when you test or use the script with only 3g and no wifi you receive a error (no pictures appear only coding) it is also present on your demo on this page, you guys might need to look at that

Comment by James on 09/06  at  05:00 AM