Information Technology Reference
In-Depth Information
would add a nice + icon to the button. The full list of icons can be found on jQuery
Mobile's website (
http://jquerymobile.com/demos/1.0.1/docs/buttons/but
tons-
data-iconpos="right"
or
"top"
or
"bottom"
to move it. We can also use
data-
iconpos="notext"
to show the icon and nothing else!
What if you want to use your own icon? Well, that's possible as well. You'll need to add
some custom CSS to do this, as well as create a properly formatted icon file (both of
which are explained at the link provided previously).
Finally, one can format buttons to appear as part of the same group by surrounding a
series of buttons with the
<div data-role="controlgroup">
and
</div>
tags. This will let
you visually cluster buttons with similar meaning (i.e., a “Yes,” “No,” or “Cancel” group).
This usually means that only the corners of the top and bottom buttons are rounded (if
using the default theme) and there is little to no space between the buttons. This is very
useful to give the user a subtle prompt about the related nature of the groupedbuttons.
Now that the first page is all done, header to footer, we'll define another two pages in
the same HTML document!
Listing 7-4 Cont.:
The about and contact pages.
<!-- about -->
<div data-role="page" id="about">
<div data-role="header">
<h1>About Us</h1>
</div>
<div data-role="content">
<p>Vivamus sit amet nulla vitae odio ultricies fringilla quis at felis. Integer sagittis
eleifend leo, et tempor elit adipiscing in. Pellentesque commodo condimentum pulvinar.
Integer vitae tellus ac sapien molestie euismod. Sed a enim ut leo fermentum lobortis ac
eget velit. Mauris commodo porta felis id fermentum. Aenean eleifend justo eu sem
consectetur auctor. Quisque convallis ullamcorper elementum. Integer hendrerit vehicula
nisi eu congue. Integer aliquet quam a arcu cursus ac consequat est pretium. Nam nec
pharetra lorem. Maecenas lacinia facilisis eros quis tempor.</p>
</div>
<div data-role="footer" class="ui-bar">
<a href="#home" data-transition="flip" data-role="button" data-theme="b">Home</a>
<a href="#contact" data-transition="pop" data-role="button" data-theme="b">Contact</a>
</div>
</div>
<!-- /about -->
<!-- contact -->
<div data-role="page" id="contact">
<div data-role="header">
<h1>Send Us Mail!</h1>
</div>
<div data-role="content">
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
<label for="email">Email:</label>
<input type="email" name="email" id="email" value="" />
</div>
