Information Technology Reference
In-Depth Information
Now I've got my application looking the way I want, and I know how to build additional
pages, transitions, and dialogs. I'm well on my way to creating not only a killer
application in terms of functionality, but one that looks nice too!
Rolling it All Together: Simple Calc
Now that we've built a few example pages in jQuery Mobile, let's build something useful:
A simple calculator. We'll build a very simple calculator that will take two numbers and
perform some operation on them, returning the result. I'm also going to create a custom
theme to use. The end result looks like Figure 7-19:
Figure 7-19.
The Simple Calc jQuery Mobile App
Simple Calc is an extremely simple calculator. You put a number into the first box, a
number into the second box below the buttons, and then hit the + or -. A small
JavaScript alert pops up, telling you what the answer is. It's simple, for sure, but useful
for showing how to add a bit of interactivity into a jQuery Mobile page using JavaScript.
Let's look at the code in Listing 7-7.
Listing 7-7.
The code for Simple Calc
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Calc</title>
<link rel="stylesheet" href="
http://code.jquery.com/mobile/1.0a1/jquery.mobile-
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<link rel="stylesheet" href="themes/simplecalc.css" />
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
