jQuery Mobile Pagination Plugin
April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach.
It’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
Permalink to '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.
How it works
Permalink to '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:
- Reference
jquery.mobile.pagination.cssandjquery.mobile.pagination.jsfrom your page. - 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!
Permalink to '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:
Support
Permalink to '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!