Wrapping up JQuery Mobile, Part 4

We finish up our investigation into jQuery Mobile with a look at one of the most important elements of mobile app design: event handling.

By Frank Ableson

Thursday, January 27th, 2011

Binding

Our previous articles have covered elements of the JQuery Mobile project, such as:

In this article we conclude our introduction to JQuery Mobile with a look at event handling.

Over the past few years the use of JavaScript has grown from a form validation helper to a field-leveler as the user experience of web applications has begun to rival traditional “smart client” applications in some arenas. Clever CSS skinning has not done this alone — another key ingredient is event handling. JQuery Mobile introduces mobile-oriented events to browser based programming. Let’s have a look.

Mobile specific events

JQuery Mobile allows programmers to capture a number of events, namely:

tap — this is pretty basic and represents a quick tap and release of an element
taphold — this event is triggered when the user holds a “tap” for at least one second
swipe — moving your finger across the display. Comes in two varieties
- swipeleft
- swiperight
orientationchange — triggered when the device is rotated, as the name implies
scrollstart and scrollstop — fired before and after scrolling occurs. Currently iOS (i.e. iPhone/iPad) doesn’t play nicely during scrolling
pagebeforecreate and pagecreate — fired before and after the initialization of a page
pagebeforeshow and pageshow — fired before and after a page is shown
pagebeforehide and pagehide — fired before and after a page is hidden
animationComplete — fired when a CSS based animation has completed

Note that these events are geared towards JQuery Mobile’s single-page navigation approach as well as mobile-specific user interactions.

An example

To demonstrate let’s look at a simple JQuery Mobile enabled page found at http://jquery.lm.navitend.com/events.html.

List of characters

Just for fun, the first person who can correctly name the source of these names will receive a complimentary copy of Android in Action in electronic form. Email your answer along with your full name to fableson at navitend dot com.

Now let’s look at the HTML which makes up this page.

<!DOCTYPE html>
<html>
<head>
<title>linuxdls JQuery Mobile Sample</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
	<div data-role="header">
	<h1>Playing with data</h1>
	</div>
	<div data-role="content">
		<ul data-role="listview">
		<li data-db-index="29">Zidgel</li>
		<li data-db-index="321">Fidgel</li>
		<li data-db-index="111">Kevin</li>
		<li data-db-index="1232">Midgel</li>
		</ul>
	</div>
	<div data-role="footer">
	Footer, Copyright, etc.
	</div>
</div>
<script>

$(document).ready(function() {
$("li").each (
	function (index) {
		$(this).bind(
			'swipe',
			function (event,ui) {
				alert($(this).attr('data-db-index'));
			}
		);
	});
$(window).bind('orientationchange',function (event,ui) {alert('orientationchange');});
}
);

</script>
</body>
</html>

Generically speaking, we add events to HTML elements with either the live() method or the bind() method.

In this case, we want to enable the user to “swipe” an entry in the list so we need to bind an event handler to the element for which we want to detect the swipe event. Have a look at the script block in the previous code listing.

All of the code we have written runs within the jquery ready() function. If you are not familiar with the ready() function, this fires once the DOM has been loaded — it is essentially wired up to the onload event of the body tag, though using both the ready() function and the onload event on the same page is discouraged.

We perform two operations in the ready function. The first functionality added to the page is to iterate over each occurence of a list item (li). For each of the list items we want to attach a “swipe” handler. Our handler simply displays an alert box containing an attribute taken from the li element named data-db-index. This attribute is a custom attribute, enabled in essence by the HTML5 rule that says that any attribute starting with “data-” is ignored by the rendering engine and is fair game for the developer to use. In this case we are storing an underlying data source record id (fictitous) to demonstrate a means of associating data with the visual layer. This is not so much of an endorsement of this approach as it is a demonstration of some capabilities available to developers with HTML5 and JQuery Mobile.

When a list item is “swiped” we see the event fire.

Swiping the list

The second piece of functionality is to detect when the device is rotated. To accomplish this we add an event handler to the window object, binding the “orientationchange” event to a custom function which simply displays an alert box.

$(window).bind('orientationchange',function (event,ui) {alert('orientationchange');});

Rotation detection

Where to next?

Over the past few articles, we have just scratched the surface of JQuery Mobile. At the time of this writing, it is at 1.0 Alpha 2 release, and candidly is a bit buggy across different platforms. For now, my plan is to keep an eye on the maturation of JQuery Mobile, looking forward to when it is ready for prime-time deployment.