jQuery Mobile 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!
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> <link rel="stylesheet" href="../jquery.mobile.pagination.css"> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> <script src="../jquery.mobile.pagination.js"></script>
<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>
Place the following markup somewhere inside each document that you want to make draggable. The links should point to the next and previous pages.
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.