jQuery Mobile: Up and Running

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.

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> ...