There are some great plug-ins out there. The following list describes the most useful plug-ins that we can use today in our jQuery Mobile projects.
The pagination plug-in (shown in Figure 10-2) can be found on http://filamentgroup.com/lab/jquery_mobile_pagination_plugin and allows jQuery Mobile to paginate content, such as images. It provides a right arrow and left arrow on the screen so the user understands he can move forward and backward.
Figure 10-2. Pagination plug-in in action showing a couple of images as different pages
The user can move between pages with:
Taps on the arrow buttons floating on the screen
Using left and right arrow keys on devices with keyboards
Swiping left and right using drag touch events
When we download the framework we will find two files
After including these two files on our
head element, we need to create a
ul element with
data-role="pagination". Every jQuery Mobile
page should have a pagination widget inside.
Every pagination widget will have two
li elements with
a links inside to the previous and next pages.
li elements will have two
for the previous page and
ui-pagination-next for the next page. For example:
<ul data-role="pagination"> <li class="ui-pagination-prev"><a href="1.html">Prev</a></li> <li class="ui-pagination-next"><a href="3.html">Next</a></li> ...