Information Technology Reference
In-Depth Information
were on?!” (Even if you didn't think of this already, you are now) Well, don't you worry
about that! If you load this page we just created in your web browser and view the About
page you will notice that jQuery Mobile was nice enough to include a back button in
your page for you (see Figure 7-9), even including the correct icon as I mentioned it
would!
Figure 7-9.
Our jQuery Mobile About Page being viewed on a Android 2.3.4 mobile device. Notice the back button
that jQuery Mobile automatically included in the user interface?
Finally, here on our Contact page is where we really start to have fun with some of the
features that jQuery Mobile provides (see Figure 7-10). Looking at our code, you will see
there are two div containers with the data-roles of “fieldcontain” on this page. As I am
sure you already guessed by now, these containers are used to house and separate
form input fields that do not necessarily have to be bunched up together. Basically, it is
used for aesthetics for those of us that are graphic design impaired. After separating our
form fields, we have yet another div container that is holding our Cancel and Submit
buttons. These buttons are positioned in a grid-like format on the page by assigning the
fieldset element the CSS class of ui-grid-a (“a” in this case stands for the theme that will
be used to style the grid container). Finally, it's worth noting that our code here sends
the email form to nothing (#) as it's written now. Later in this chapter, we'll see how we
can use JavaScript to process forms, or one could write a simple PHP script to accept
the form data and process it.
