O'Reilly logo

jQuery Mobile by Jon Reid

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

Events

jQuery Mobile includes a whole new set of events geared around mobile applications.

Touch Events

jQuery Mobile enables several new touch event categories:

tap

A tap event, triggered when the user taps on an element

taphold

A tap-and-hold event, triggered when the user taps and holds on an element for about a second

swipe

A swipe event, triggered when the user swipes either vertically (20 or fewer pixels) or horizontally (30 or more pixels)

swipeleft

A left-directed swipe, triggered when the user swipes to the left 30 or more pixels

swiperight

A right-directed swipe, triggered when the user swipes to the right 30 or more pixels

All these events can be bound to elements using the usual jQuery bind, live, or delegate methods. Example 5-3 shows how to use these touch events.

Example 5-3. Using jQuery Mobile touch events

<script>
$("ul").delegate("li", "swiperight", function() {
  // The user has swiped to the right on a list view item.  Show an edit menu.
  $(this).find(".menu-edit").show();
})
</script>

Under The Hood: Using Swipe Events to Trigger Page Transitions

Using these new events, it’s easy to set up an application that uses swipe events to trigger page transitions. Combined with the page transition features of jQuery Mobile, this can make for a powerful user experience.

As a simple example, let’s add to our three-page example from Chapter 2, as I have done in Example 5-4.

Example 5-4. Simple application with three pages

<!-- begin first page --> <section id="page1" data-role="page"> <header ...

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