Information Technology Reference
In-Depth Information
Figure 7-11.
The transition demo page
Press on each link to see the appropriate transition, and then use the back button on
Page 2 to see the inverse. We specify the transition we want in the HTML HREF link in
Listing 7-4, and you're able to play with them as much as you want. Remember,
however, when working with transitions, one should probably decide what each
transition means in advance, to keep the user from getting confused. If entering
something into a database causes a fade transition, while a slide up indicates a
message or error, switching those around freely might make the user second-guess the
action they took. Also note that the Flip and Pop transitions might not render properly on
some versions of the Android stock browser, so one might want to avoid them.
Speaking of showing messages to the user…
Let's Have a Dialog
Dialog boxes have been around for a long time in terms of computers. We've already
shown some very simple ones earlier in this topic; however, jQuery Mobile has a very nice
built-in way to show these dialogs, which we'll show off using the following Listing 7-6.
Listing 7-6.
Dialog example
<!DOCTYPE HTML>
<html>
<head>
<title>This is jQuery's Base Template, Showing off The Dialogs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="
http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.css"
/>
<script type="text/javascript" src="http://code.jquery.com/jquery-
1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-
1.0.min.js"></script>
