In this article we conclude our introduction to JQuery Mobile with a look at event handling.
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
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.
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.
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.
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.
Fatal error: Call to undefined function aa_author_bios() in /opt/apache/dms/b2b/linux-mag.com/site/www/htdocs/wp-content/themes/linuxmag/single.php on line 62