O'Reilly logo

jQuery Mobile: Up and Running by Maximiliano Firtman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Notable Plug-ins

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.

Pagination

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.

Pagination plug-in in action showing a couple of images as different pages

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

  • jquery.mobile.pagination.css

  • jquery.mobile.pagination.js

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. The li elements will have two classes: ui-pagination-prev 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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required