Information Technology Reference
In-Depth Information
As you can see, jQuery Mobile allows you to create a very nice looking user interface in
a very short amount of time!
Figure 7-10.
Our jQuery Mobile Contact Page neatly formatted and viewed on a Android 2.3.4 mobile device
So - About Those Transitions
If you've been coding along, you'll notice that the buttons in the previous example
transition differently depending on what we want to do. Animation is a key element in
mobile design as it lets the small screen give the user a sense of three dimensions,
which can help them understand what they're doing. By default, the jQuery mobile
framework will implement a right to left slide transition, which gives the user the feeling
of turning a page. The framework is also nice enough that when the 'back' button is
pressed, it will reverse the transition it initially used, so in this case, turning to a previous
page. In Listing 7-5, I've created a simple page that shows off all of the transition types,
moving from Page One to Page Two.
Listing 7-5.
transition demo HTML
<!DOCTYPE HTML>
<html>
<head>
<title>This is jQuery's Base Template, Showing off The Transitions</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
