Professional Documents
Culture Documents
But how do you build your development chops fast enough to join their ranks?
jQuery Mobile
With Peachpit’s Develop and Design series for visual learners.
jQuery Mobile
Develop and Design Develop and Design
jQuery Mobile
THE jQUERY MOBILE FRAMEWORK CHANGES THE WAY “Author Kris Hadlock covers the details of
mobile applications are accessed and distributed on mobile the framework with a practical, enjoyable
narrative that will quickly get you up to speed
and tablet devices. This game-changing JavaScript library takes and ready to create something great!”
existing webpages and converts them into touch-friendly web- Scott Jehl
sites and applications, eliminating the need for web developers Lead Developer of jQuery Mobile and Web Designer
and Developer with Filament Group
to create native applications for multiple mobile platforms.
Long-time developer and author Kris Hadlock applies his real-
This book includes:
world, practical experience in this complete introduction to
creating working mobile sites using the jQuery Mobile frame-
JJ Easy step-by-step instruction, ample
illustrations, and clear examples
KRIS HADLOCK is the founder and lead developer-designer of Phoenix-based Companion website:
web design and application development firm Studio Sedition (www.studio- http://peachpit.com/jquerymobile
sedition.com), and has worked with companies such as SPIN Magazine, IKEA,
United Airlines, and JP Morgan Chase. His other books include The ActionScript
facebook.com/PeachpitCreativeLearning
Migration Guide and Ajax for Web Application Developers, and he has written for
Hadlock
Peachpit.com, InformIT.com, IBM developerWorks, and .net magazine. @peachpit
Kris Hadlock
5 4 4 9 9
Book Level Beginner to Intermediate
Category Web Development
Covers jQuery Mobile Framework
9 780321 820419
Cover Design Aren Howell Straiger
jQuery Mobile
Develop and Design
Kris Hadlock
jQuery Mobile: Develop and Design
Kris Hadlock
Peachpit Press
1249 Eighth Street
Berkeley, CA 94710
510/524-2178
510/524-2221 (fax)
Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, elec-
tronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the pub-
lisher. For information on getting permission for reprints and excerpts, contact permissions@peachpit.com.
Notice of Liability
The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has
been taken in the preparation of the book, neither the author nor Peachpit Press shall have any liability to any
person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the
instructions contained in this book or by the computer software and hardware products described in it.
Trademarks
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the
designations appear as requested by the owner of the trademark. All other product names and services identi-
fied throughout this book are used in editorial fashion only and for the benefit of such companies with no
intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey
endorsement or other affiliation with this book.
ISBN-13: 978-0-321-82041-9
ISBN-10: 0-321-82041-X
9 8 7 6 5 4 3 2 1
There are many people I would like to thank for the opportunity and help they gave
before, during, and after this book was being written: Neil Salkind, for helping me
navigate the world of publishing and for his support while I was writing. Robyn
Thomas for her patience. Jay Blanchard for stepping in when needed and provid-
ing excellent technical reviews. Rebecca Gulick for helping to move things along.
Michael Nolan for working out the details. All my customers, for understanding
how busy I’ve been. And, of course, Peachpit for giving me the opportunity to
write for you.
Contents v
Part II UI Components
Contents vii
Part IV The Mobile API
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Contents ix
Introducing
the Future of
Web Development
Smartphone, tablet, and e-reader
statistics are showing an unprec-
edented adoption rate, making the
mobile web a very hot topic and requiring a new set of skills from
web developers and designers. Mobile device usage is skyrocketing;
according to Nielsen’s third-quarter 2011 Mobile Media Report, “44
percent of U.S. mobile subscribers now own a smartphone device,
compared to 18 percent just two years ago.” That’s more than double
in two years, and “the number of smartphone subscribers using the
mobile Internet has grown 45 percent since 2010.” As for tablets, in
June 2011 AMI-Partners (Access Markets International) forecasted
that “tablet adoption among businesses with between 1 and 1,000
employees will grow by 1,000 percent by 2015.”
xi
Let’s not forget e-readers, which are becoming very affordable and are more
advanced then ever, increasing in shipment volume, as “year-over-year growth was
167%” according to International Data Corporation (IDC). With the introduction
of the latest Kindle, mobile Internet access is now becoming a normal experience.
With these increases in adoption rate, there will no doubt be high demand for
web developers who can create rich mobile web experiences. The jQuery Mobile
framework gives web developers a quick and easy way to create mobile web experi-
ences, making the mobile web space hard to ignore.
Introduction xiii
Who This Book Is For
This book is for people who have basic HTML experience and are interested in
creating mobile websites using the jQuery Mobile framework.
Wrapping Up
The jQuery Mobile framework is a powerful framework that is supported by mobile
industry leaders. It can easily be added to an existing website to create a mobile
web experience that is not only touch-friendly, but also supported on a majority of
the leading mobile platforms as well as handicap accessible. Design control, page
transitions, widget integration, scripting, API access, and much more are all at your
fingertips through this framework’s easy-to-use features and built-in progressive
enhancement techniques.
xvii
Currently, Android and Apple iOS are the leading mobile operating systems. Android
has the largest operating system market share (44.2 percent), while Apple has
the largest smartphone market share in the United States (28.6 percent). The
Windows, BlackBerry, SymbianOS, and Palm/HP webOS operating systems com-
prise the remaining majority of smartphone market share (Figure 1). All of these
platforms/operating systems are supported by the jQuery Mobile framework.
Major Platforms
The following list provides a bit more information on the major platforms that are
fully supported by the jQuery Mobile framework.
xviii
HTC Figure 1 Operating
HTC HTC <1% system market share as
15.8% 4.2%
of 2011.
Nokia Samsung
Samsung 1.6% <1%
10.4% Apple RIM BlackBerry
28.6% 17.0% HP
1.9%
Motorola Samsung
10.7% <1%
Other Other
<1% <1%
Other Motorola
7.3% <1% Other
<1%
%
s P O 6%
71 %
%
.2
.6
.0
5.3
ne .0
.3
w eb 1.
17
44
28
ho S 2
do W OS
le
ry
OS
OS
Pa Sy obi
er
n
W / HP bia
kB
d
ne
sM
oi
ac
ho
lm m
dr
w
Bl
iP
An
do
M
e
in
pl
in
RI
W
Ap
Graded Support
jQuery Mobile uses a three-tier, graded list of the
platforms that are supported by the framework. The
tiers are A, B, and C. A includes a full experience with
the option of Ajax-based page transitions, B includes
BlackBerry webOS the same experience minus the Ajax-based page
transitions, and C is a basic, yet functional, HTML
BlackBerry is powered webOS is the open-source
by a proprietary mobile operating system used by experience.
operating system, offered Palm devices. webOS uses A-grade support includes all the major mobile oper-
on its own set of smart- the WebKit layout engine ating systems that were mentioned previously and
phones and tablets. in its web browser, simply more, including Apple iOS, Android, Windows Phone,
named Web.
BlackBerry, Palm/HP webOS, Kindle 3, Kindle Fire, and
more. B-grade support includes BlackBerry 5, Opera
Mini, and Nokia SymbianOS. C-grade support includes
BlackBerry 4, Windows Mobile, and all older smart-
phones and feature phones. This list is always evolving;
to see an up-to-date list, visit jquerymobile.com and
check out the supported platforms.
This page intentionally left blank
4
Creating
Multipage
Websites
Now that we’ve covered the basics
of structuring mobile webpages,
we’ll take a deeper look and get a better
understanding of the functionality behind them. As mentioned
in Chapter 3, “Getting Started with jQuery Mobile,” there are two
ways to structure webpages for jQuery Mobile: incorporate all
the pages in the same file, or create separate files for each page
like a typical website. Understanding the different page template
types is the foundation for customizing a number of different
page-related functionalities. In addition to learning about the
page template types, you’ll also see how to preload and cache
pages, work with different page transitions, and customize load-
ing messages. You’ll learn to create custom functionality to take
your pages to the next level.
41
Multipage Template
Internal linking occurs automatically when you have multiple jQuery Mobile pages
in the same HTML file. As you’ve learned, jQuery Mobile pages are defined by add-
ing a data-role with a value of page to an HTML element and anything within that
page becomes relative to that page. In jQuery Mobile, typical separate webpages
are considered single-page templates, while webpages that contain multiple pages
are considered multipage templates. Let’s refer back to our multipage template
example from the previous chapter (with a few small additions):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
p charset=UTF-8”>
<meta name=”viewport” content=”width=device-width,
p initial-scale=1”>
<title>Multipage template - jQuery Mobile: Design and
p Develop</title>
<link rel=”stylesheet” href=”http://code.jquery.com/
p mobile/1.0.1/jquery.mobile-1.0.1.min.css” />
<script src=”http://ajax.googleapis.com/ajax/libs/
p jquery/1.7.1/jquery.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0.1/
p jquery.mobile-1.0.1.min.js”></script>
</script>
<script type=”text/javascript” src=”assets/js/ui.js”>
</script>
</head>
<body class=”container”>
<div data-role=”page” id=”page-one” data-title=”Page 1”>
<div data-role=”header”>
<h1>Page 1</h1>
</div>
Within this multipage template are two pages defined by div elements with
custom ids. The jQuery Mobile framework shows only one of these pages at a
time, and it uses the data-title attribute to change the page title dynamically.
The page that is shown by default is determined by the order of the source code.
In this example, the first page has an id of page-one, but if the pages in this file were
switched, so that the element with an id of page-two came first, then that would
be the default page to load. In other words, the value of the id attribute doesn’t
Multipage Template 43
Figure 4.1 A multipage
t emplate with two pages and
the transition in between.
determine what page is shown by default; the default page is determined only by
the source code order. However, the id is used for other important purposes, such
as linking pages to one another.
This is where jQuery Mobile pages begin to act like separate webpages. Note
that hyperlinks have been added to the original template to link from one page to
another. This is somewhat like the toggle functionality that’s common in JavaScript
development, where id values are used to hide and reveal certain HTML elements.
The difference here is that jQuery Mobile handles the functionality for you. To link
from one page to another you simply need to:
1. Create a hyperlink.
2. Type the pound sign (#).
3. Specify the id value of the page you want to link to.
The end result looks like this:
It’s similar to creating a page anchor; the difference is that you’re referencing
the id value of another page. Remember that each page needs a unique id value.
In this case, I’ve used page-one and page-two, but you can use something more
descriptive and relative to the content of your jQuery Mobile page. The cool thing
about the jQuery Mobile framework is that it transitions dynamically from one
page to another without requiring you to write an ounce of code. Figure 4.1 shows
an example of this code in both page views and the transition from one to another.
Single-page templates are separate HTML files that act as independent webpages,
just like any standard webpage. The main difference is in how jQuery Mobile con-
nects webpages using Ajax. As with multipage templates, the Ajax-based navigation
in single-page templates uses hashtags to create a page history. The Ajax-based
navigation used by jQuery Mobile is the default, but it can be turned off by setting
the ajaxEnabled setting to false in the configuration. You’ll learn more about the
configuration settings later in this book.
Ajah is an abbreviation that is sometimes used for Asynchronous JavaScript
and HTML. Ajah is essentially Ajax without the XML; the XMLHttpRequest is
still used, but HTML is exchanged with the server rather than XML. This is what
jQuery Mobile uses as the user browses independent webpages. We briefly covered
how the jQuery Mobile framework uses the XMLHttpRequest to load subsequent
pages in the previous chapter, but there’s a lot to learn and understand about this
simple request.
One great thing about the jQuery Mobile framework is how it tracks history:
it supports the back and forward buttons! Also, while subsequent pages load, the
framework provides a default loading message and transitions between pages. The
default page transition is to slide between two pages, and the default loading mes-
sage is a spinning icon with a “loading...” message. Both options are configurable,
as you’ll learn in the next chapter. For now, let’s see how hashtags and history
work in jQuery Mobile.
Single-Page Template 45
The only issue with jQuery Mobile’s hashtag-based navigation is that it doesn’t
support deep linking. However, there are some workarounds you can use to sup-
port this functionality. With a little help from jQuery, you can add a script, like the
following, to your webpage and your deep links will function as usual:
$(document).ready(function() {
$(‘a[href^=”#”]’).bind(‘click vclick’, function () {
location.hash = $(this).attr(‘href’);
return false;
});
});
In HTML, all hyperlinks that include a pound sign (#) as their first character
are identified as anchors. This script uses a regular expression that includes the
caret symbol to identify all anchor elements that have an href attribute with a
value that begins with the pound sign. Once these elements have been selected,
you can use the bind method to bind a click and vclick event to the anchor tags
and assign an anonymous function handler as the callback.
The callback function sets the window object’s location.hash to the value of
the anchor and returns false to prevent the browser from performing the default
action associated with clicking the hyperlink.
notes: The caret (^) symbol is often used in regular expressions to designate
the beginning of a string.
The vclick event is an option used in jQuery Mobile by devices that support
touch events. The event supports faster page changes and during page transi-
tions it keeps the address bar hidden.
jQuery Mobile supports standard HTML link types as well as a number of custom
link types related to the mobile experience. The following tables offer a list of
the supported link types available through the jQuery Mobile framework. Each
table shows options categorized based on their end result and/or support of Ajax.
Table 4.1 describes links that support Ajax.
<a href=”http://www.jquerymobile.tv”> A standard HTML link that is transformed by the jQuery Mobile framework
p Hyperlink within same domain </a> to use Ajax, include page transitions, and support page history.
<a href=”http://www.jquerymobile.tv” An option used for dialog windows that is not tracked in page history.
p data-rel=”dialog”> Open a dialog</a>
<a href=”http://www.jquerymobile.tv” This option can be used to navigate back in page history; it’s a great option
p data-rel=”back”>Back button</a> for providing a back button from a page or dialog. The href is ignored in
A- and B-grade browsers, but is necessary for C-grade browsers.
Graded support
A-grade support includes all the major mobile operating systems men-
tioned previously and others, including Apple iOS, Android, Windows Phone,
BlackBerry, Palm WebOS, Kindle 3, and Kindle Fire. B-grade support includes
BlackBerry 5, Opera Mini, and Nokia Symbian. C-grade support includes Black-
Berry 4, Windows Mobile, and all older smartphones and feature phones. Visit
jquerymobile.com to see an up-to-date list of supported platforms.
Link Types 47
Table 4.2 describes a list of hyperlinks that disable the Ajax page-transition
functionality. These hyperlinks are great for pages on an external domain, pages
that open in a new window, linking from single to multipage templates, or linking
to pages where you don’t want to use Ajax.
Table 4.3 includes link types that stem from a basic HTML hyperlink with the
addition of specific attributes.
<a href=”http://www.jquery.com” rel=”external”> By default this attribute defines a hyperlink as external, which not
p External hyperlink</a> only disables Ajax, but also removes it from the page hashtag his-
tory and refreshes the webpage. This option can be transformed
using jQuery to open new windows in a standards-compliant way.
<a href=”tel:15556667777”>Phone Number</a> This hyperlink initiates a phone call when clicked on some phones.
<a href=”mailto:jdoe@jquerymobile.tv”> This hyperlink initiates a new email that’s prefilled with the
p Email link</a> specified email address.
<a href=”#”>Hyperlink</a> This hyperlink returns false. It’s useful when creating a back
button as in Table 4.1.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
p charset=UTF-8”>
<meta name=”viewport” content=”width=device-width,
p initial-scale=1”>
<title>Single-page template - Page 1 - jQuery Mobile: Design
p and Develop</title>
<link rel=”stylesheet” href=”http://code.jquery.com/
p mobile/1.0.1/jquery.mobile-1.0.1.min.css” />
<script src=”http://ajax.googleapis.com/ajax/libs/
p jquery/1.7.1/jquery.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0.1/
p jquery.mobile-1.0.1.min.js”></script>
</script>
</head>
<body class=”container”>
<div data-role=”page”>
<div data-role=”header”>
<h1>Page 1</h1>
</div>
<div data-role=”content”>
<p><a href=”single-page-2.html”>Link to page 2</a></p>
<p><a href=”single-page-2.html” rel=”external”>
p External Link to page 2</a></p>
<p><a href=”single-page-2.html” data-ajax=”false”>
p Ajax-disabled link to page 2</a></p>
Link Types 49
</div>
<div data-role=”footer”>
Copyright
</div>
</div>
</body>
</html>
An internal link requires no special markup and is where the framework will
interject and create a page transition between the current page and the page that’s
being linked to. An external link is one that requires the rel attribute, which must
be set to a value of external. Setting a hyperlink as external disables Ajax, removes
it from the page hashtag history, and refreshes the webpage when the link is clicked.
The link that disables Ajax requires a data-ajax attribute with a value of false.
This disables Ajax, removes it from the page hashtag history, and refreshes the
webpage, just like the previous example, with the main difference being that the
rel=”external” attribute can be used as a standards-compliant way to create
hyperlinks that target new windows with a little help from jQuery.
In this next example, there’s an internal link and a hyperlink that acts as a
back button:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
p charset=UTF-8”>
<meta name=”viewport” content=”width=device-width,
p initial-scale=1”>
<title>Single-page template - Page 2 - jQuery Mobile: Design
p and Develop</title>
<link rel=”stylesheet” href=”http://code.jquery.com/
p mobile/1.0.1/jquery.mobile-1.0.1.min.css” />
Setting the data-rel attribute to back creates a hyperlink that acts like a back
button. When this link is clicked, the jQuery Mobile framework automatically links
to the previous page in history.
Link Types 51
Preloading and
Caching Pages
Page caching is very important when working with anything web-based. Cache
refers to hidden storage where files are collected. By default, browsers handle
webpage caching by putting the associated files in a local directory on the user’s
computer so the webpage and its associated assets will load more quickly during
subsequent visits. jQuery Mobile takes this concept a step further: the framework
allows pages to be cached even before they’re linked to or displayed in the browser.
Taking advantage of this functionality is as easy as using an HTML attribute named
data-prefetch. Simply add it to any hyperlink in your webpage, and once the
webpage has loaded, the URLs that these hyperlinks point to will be preloaded and
cached. The following line of code shows how to add this attribute to a hyperlink
to preload and cache the page it’s pointing to:
When running this example in a web browser, the request is made immediately
upon page load. Figure 4.2 shows an example of the XMLHttpRequest being made
from Chrome when the page loads.
The framework also provides a way to handle page preloading via the applica-
tion programming interface (API). We’ll talk more specifically about the API later
in the book, but it’s important to know how to access it.
$.mobile
Once the document object is ready, use the loadPage method to pass the URL
you want to preload and define a number of properties for the request:
$(document).ready(function() {
$.mobile.loadPage( “page2.html”, {
type: false,
reloadPage: false,
type: ‘get’
});
});
There are quite a few arguments you can pass as options in the loadPage method.
Table 4.4 lists those optional arguments.
Argument Description
data Holds an object or string that can be sent with an Ajax page
request.
loadMsgDelay Sets the number of milliseconds to delay before showing the load
message. The default is 50 milliseconds.
pageContainer Holds the loaded page. The default is the jQuery Mobile page
container, but this is customizable.
reloadPage Defines whether or not to reload the page being requested. The
default value is false.
role When the page is loaded, this defines the data-role value that will
be applied.
To cache a webpage using the API, you can set all pages to cache by default:
$.mobile.page.prototype.options.domCache = true;
Or, you can cache a page independently. You would cache a page with an id
of my-page like so:
$(‘#my-page’).page(true);
When working with the single-page template, jQuery Mobile also manages
the pages it preloads so the DOM doesn’t get too large. If many pages are kept in
the DOM, the browser’s memory usage can get out of control and the browser will
likely slow down or crash. To manage the memory size, the framework removes
pages that are loaded via Ajax from the DOM automatically via the pagehide event
when the visitor navigates away from them. You’ll learn more about this and other
events later in the book.
There are a number of benefits to preloading and caching pages. They load
quicker and prevent the Ajax loading message from appearing when a visitor tries
to access the preloaded page. However, it’s important to keep in mind that each
preloaded page creates an additional HTTP request, which uses more bandwidth.
Therefore, it’s important to preload pages only when you think visitors are likely
to view a subsequent webpage.
A number of page transitions can be used with the jQuery Mobile framework. All
the page transitions are CSS-based effects. When using Ajax navigation, the page
transitions work between linked pages or form submissions. Table 4.5 lists the
available page transitions in the framework.
Method Description
slide Slides the hyperlinked page in from the right to replace the current page. Slide is the default
page transition.
slidedown Slides the hyperlinked page down from the top to replace the current page.
pop Zooms the hyperlinked page in from the center of the current page and replaces it.
fade Fades in the hyperlinked page over the current page and replaces it.
flip Creates a 3D effect where the hyperlinked page appears to be on the backside of the current
page as it flips and the hyperlinked page comes into view.
Each of these page transitions is easy to set up globally as a default using the
defaultPageTransition property. To set it up properly, it’s necessary to bind to the
mobileinit event, which is accessible through the API via the jQuery Mobile object:
$(document).bind(“mobileinit”, function() {
$.mobile.defaultPageTransition = ‘fade’;
});
The binding of the event handler needs to be executed before the jQuery Mobile
library loads. Therefore, in your HTML file, arrange your JavaScript files in a spe-
cific order:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
p jquery.min.js”></script>
<script src=”assets/js/custom-jqm-transitions.js”></script>
They can also be set on a per-link basis to override the default page transition.
This option is useful for a number of situations, such as creating pop-up windows
that use the pop transition:
It’s even possible to set the page transition to none to disable the page transi-
tion for a particular hyperlink or form submission:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
p charset=UTF-8”>
<meta name=”viewport” content=”width=device-width,
p initial-scale=1”>
Beginning with the head of the document, you can see that the jQuery library
is loaded first, then the custom JavaScript where the mobileinit event from our
previous example is bound and the default page transition is set. Last, but not least,
the jQuery Mobile library is loaded. Within the page there’s a hyperlink that has a
pop transition applied and a form that has a flip transition applied.
When pages are loading, a default message appears if there’s a delay or if the page
is not yet preloaded. The jQuery Mobile framework allows you to customize this
message and a page-error loading message.
You can customize the loading message through the loadingMessage property.
Set loadingMessage to any custom string by binding to the mobileinit event, which
jQuery Mobile fires as soon as the document loads.
$(document).bind(“mobileinit”, function() {
$.mobile.loadingMessage = ‘Please wait’;
});
This code will display a loading message that says “Please wait.” The default
message used for page loading is “Loading.” The property can also be set to false
to display no message at all:
$(document).bind(“mobileinit”, function() {
$.mobile.loadingMessage = false;
});
When there is an error loading a page, jQuery Mobile displays a message that
can also be customized through the API. The default message for page-load errors
is “Error Loading Page.” You can set the pageLoadErrorMessage property to any
custom string as the error message:
$(document).bind(“mobileinit”, function() {
$.mobile.pageLoadErrorMessage = ‘There was an error, please try
p again.’;
});
Working with pages is easy with jQuery Mobile: all you really need to know is basic
HTML and a few mobile-related attributes. With most of the heavy lifting being
done by the framework, it’s easy to focus on the results of the website you’re build-
ing. Understanding the internal functionality behind how pages work in jQuery
Mobile is what begins to set you up for writing custom functionality. Customizing
specific functionality in the messaging and behind the scenes helps to personal-
ize your website. The level of customization that jQuery Mobile provides can be
very useful in making a website more user-friendly. Visual indicators, like custom
loading messages and page transitions, set expectations for visitors and provide
them with a frame of reference, so they know when certain things are happening.
Preloading and caching improves usability by speeding up page loads and giving
visitors what they want when they want it. jQuery Mobile provides fine-grained
control to enhance mobile websites in a custom way.
Wrapping Up 59
Index
272 Index
C click event
adding to logo widget, 210–211
caching webpages, 52–54 applying, 11–12
in DOM (document object model), 54 example of, 8–10
using API, 54 using bind method with, 46
caret (^), using in regular expressions, 46 CMS (content management system), 227, 237.
CDN (content delivery network), 6 See also Drupal; WordPress
CDN-hosted files collapsible content area, example of, 164
obtaining, 31 collapsible content, nesting, 100–101
referencing, 30 collapsible content widget. See also jQuery
changePage method Mobile widgets; widgets
setting to step2.php, 215–216 creating accordions, 101–102
triggering, 213–214 described, 99
using, 210–216 using, 99–100
changePage properties color blocks, dragging, 160
adding to options argument, 213 color swatches, 158–159
allowSamePageTransition, 212 content area, separating data-theme
changeHash, 212 from, 165
data, 212 content delivery network (CDN), 6
dataUrl, 212 content theming, 163–164. See also
pageContainer, 212 form element theming; theming
reloadPage, 212 components
reverse, 212 controlgroup, select menu in, 149
role, 212 copyright notices, including in footers, 82
showLoadMsg, 212 count bubble
transition, 212 adding to list item, 115–117
type, 212 adding to listview, 169
checkboxes, 141–145 Cowemo online simulator, 265–266
applying mini, 145 crowd testing, 271. See also testing
controlgroup data-role groups, 142 custom data
disable method, 145 accessing, 24
enable method, 145 using, 24
events, 145 custom namespaces, using, 24–26. See also
horizontal toggle set, 143–144 namespaces
legend in fieldset, 142 customizing code, 178
questions, 142
versus radio buttons, 141
refresh method, 145 D
setting theme, 145 dash (-)
statements, 142 using at end of namespaces, 178
versus text inputs, 145 using with custom namespaces, 25
checkmark icon, using, 72–73 data- attributes
Chrome Developer Tools, using, 37 adding to image tags, 24
clearQueue method, 13–14 for buttons, 70
Index 273
data- attributes (continued) delay method, 13
custom namespaces, 24–26 Delete button, combining with Save, 80
customizing, 178 dequeue method, 13
data-role custom attribute, 25, 32–33 desktop simulators, testing with, 270.
explained, 24 See also testing with simulators
preventing name clashing, 24–25 detecting devices. See device detection
values, 24 device detection
data-collapsed attribute, using, 100 using JavaScript, 257–260
data-divider-theme, using, 168 using PHP, 254–256
data-filter attribute, adding, 122–123 dialog transitions
data-filter-placeholder attribute, using, altering, 188–189
123–124 pop, 188
data-filtertext attribute, adding, 130–131 dialog windows
data-hyperlink attribute, using with creating, 62–68
changePage method, 211 as external webpages, 64–65
data-prefetch attribute, using, 52 flip transition, 68
data-rel attribute max-width, 67
setting to back, 51 multipage, 62–63
setting to dialog, 62–63 overwriting widths, 67
data-role attribute pop transition, 68
for button, 69–70 as pop-up windows, 66–68
button setting, 80 single-page, 65
collapsible value, 99 slidedown transition, 68
collapsible-set value, 101–102 transitions, 68
defining pages, 32 .ui-dialog classes, 67
described, 25 dialog-window.html file, 64–65
header value, 76 display, responsive design, 196
list-divider value, 114 displaying content, considering, 23
listview value, 106 div.foo jQuery object
navbar value, 85 binding click event to, 8–9
data-split-icon attribute, using, 113 clicking, 13
data-split-theme, using with listview, 170 <!DOCTYPE> declaration, 20
data-theme attribute document.ready event, using with touch
applying to form elements, 166 events, 193
described, 25 documents, waiting for loading, 11–12
in listview, 166–167 Drupal. See also CMS (content management
separating from content area, 165 system); WordPress
using with linked lists, 107 adding content, 248–249
data-title attribute, 43 blog posts, 248
default page transitions, altering, 188–189 creating pages, 248–249
defaultDialogTransition property, custom settings, 247
targeting, 188 database configuration, 240
defaultPageTransition property, defining front page, 248–249
targeting, 188
274 Index
downloading, 238 filter.js file, using, 126–128
installing, 238–241 Firefox, Modify Headers add-on, 269
installing jQuery Mobile theme, 246 flip toggle switches, 154–155
jquery directory, 243–244 making, 154
jQuery Mobile module, 242–245 versus sliders, 155
jQuery Mobile theme, 246 flip transition
language selection, 239 using, 55, 57
libraries directory, 243 using with dialog windows, 68
node ID, 248–249 font styling, adding, 92–93
profile selection, 239 footer component, applying swatch to, 162
Sequel Pro for Mac OS, 238 footer toolbars
site configuration, 240 markup, 82
theming with jQuery Mobile, 242–247 using, 82
form element theming, 165–170. See also
content theming; theming components
E form elements
email folders, using count bubbles with, anchor with id of next-btn, 213–214
116–117 applying data-theme to, 166
emailAddress; input, 215–216 changing swatches on, 166
emulators, testing with, 268 checkboxes, 141–145
“Error Loading Page” message, 58 emailAddress; input, 215–216
events. See also mobileinit event flip toggle switches, 154–155
binding to elements, 9 radio buttons, 141–145
customizing, 11 select menus, 146–151
managing, 8–11 sliders, 152–154
orientation, 195–196 text inputs, 134–140
page transition, 200–203 functions
scroll, 197–199 managing, 8–11
touch, 192–194 versus methods, 10
exposed methods. See also methods; utility
methods
changePage, 210–216
G
data-hyperlink attribute, 211 gear icons, using with split button lists, 113
explained, 209 global options
loading pages, 217–218 active button classes, 184–186
external links, using, 49–50 active page classes, 184–186
customizing namespaces, 178–179
customizing subPageUrlKey, 183
F default page transitions, 188–189
fade transition, using, 55 delaying page initialization, 180–182
fieldset, controlgroup data-role, 148 dialog transitions, 188–189
filterCallback option, using with search disabling Ajax navigation, 187
filters, 126 enabling Ajax navigation, 187
filtering items, 123 extending mobileinit event, 176–177
Index 275
grid columns HTML files
adding custom CSS to, 93–94 anchors, 46
block-title custom class, 93–94 single-page templates, 45
ui-bar-a class prefix, 92, 98 using on webpages, 35
ui-block class prefix, 90 HTML5, data attributes. See data- attributes
ui-grid-a class prefix, 90 HTML5 template. See also multipage
grid rows, 97–98 template; single-page template
grids adding framework to, 31
columns, 90–97 creating, 20
creating, 90 <!DOCTYPE> declaration, 20
CSS class, 90 viewport meta tag, 22
described, 90 hyperlinks
rows, 97–98 applying transition effects to, 189
toolbar layouts, 95–97 converting to buttons, 69
two-column layout, 90–91 markup, 48
ui-grid-c class, 97 markup for Ajax, 47
pound sign (#) in, 46
H
hashtags, managing history with, 45–46 I
header component, applying swatch icons
to, 162 adding to list items, 118–119
header element, adding Save button customizing, 72
to, 78–80 including on buttons, 71
header toolbars id value, referencing, 44
CSS classes, 77 image tags, adding data- attributes to, 24
grouping buttons, 80 input elements, using buttons with, 70
heading element, 77 inset lists, creating, 111
markup, 77 installing
navbars in, 85–86 Drupal, 238–241
with page title, 76 JQuery Mobile module, 242–245
ui-title class, 77 WordPress, 228–230
without page title, 76 internal links, using, 49–51
“Hello world!” blog post, accessing, 232
history, managing with hashtags, 45–46
home data icon, using, 71–72
J
home page, setting in WordPress, 235 JavaScript
HTML elements. See also semantic HTML device detection, 257–260
accessing by ID, 7 match() method, 258
.class selector, 8 navigator object, 257
scope, 9 regular expressions, 257–259
selecting, 7–8 switch statement, 258–259
targeting, 8 user agent information, 257–258
$(this), 9–10, 12 JavaScript Object Notation (JSON), 213
276 Index
jqm-wp database, creating, 228 link types, 48
jQuery framework for Ajax, 47
cross-browser compatibility, 7 disabling Ajax, 47, 49–50
described, 5 external, 49–50
downloading, 6 internal, 49–51
selecting HTML elements, 7–8 linked lists
jquery() function, using with HTML data-theme attribute, 107
elements, 7 described, 106
jQuery Mobile framework inset, 111
adding to HTML5 template, 31 listview value, 107
adding to websites, 30–31 nested, 109–110
A-grade support, 47 numbered, 109
B-grade support, 47 pointer cursor, 107–108
C-grade support, 47 ui-btn class, 107–108
downloading packages, 30 ui-btn-icon-right class, 108
ns option, 25 ui-listview class, 107
obtaining, 30 list dividers
referencing CDN-hosted files, 30 adding themes to, 168
.support method, 259–260 creating, 114
version 1.1.0, 135 using, 116–117
jQuery Mobile module list items, filtering, 130–131
configuring settings, 247 lists
downloading, 242–245 count bubbles, 115–119
jquery.custom directory, 244 customizing, 112–119
variables in settings.php, 244–245 icons, 118–119
jQuery Mobile theme linked, 106–111
custom settings, 247 search filter bars, 122–123
installing for Drupal, 246 split button, 112–113
jQuery Mobile widgets, 183. See also thumbnails, 117–118
collapsible content widget; widgets listview
jquerymobiletv- namespace, customizing, adding id for, 126–128
178–179 count bubble theme, 169
JSON (JavaScript Object Notation), 213 data-divider-theme, 168
data-split-theme, 170
data-theme in, 166–167
K with “e” swatch data-theme, 167
Keynote DeviceAnywhere remote lab, 269 using with search filter text, 125–128
listview theme
L customizing, 167
overriding with list items, 167
landscape value, using with orientation loading messages, customizing, 58
property, 195 loading webpages, 197–199
lazy loading effect, creating with scroll loadingMessage property, setting, 58
events, 197–199
Index 277
loadPage method Mobilizer, 270
markup, 219 online, 265–267
url argument, 218 using, 264
using, 53, 217–220 mobile web, developing for, 264
loadPage method arguments mobile webpages. See also webpages
data, 53 Chrome Developer Tools, 37
loadMsgDelay, 53 page data-role attribute, 35–36
pageContainer, 53 structuring, 34–37
reloadPage, 53 using separate HTML files, 35
role, 53 XMLHttpRequest, 36–37
type, 53 Mobile Websites 4U simulator, 267
loadPage properties mobile_detection.php file, 256
data, 218 $.mobile.base utility method, 220
loadMsgDelay, 218 mobile-device detection
pageContainer, 218 using JavaScript, 257–260
reloadPage, 218 using PHP, 254–256
role, 218 $.mobile.activepage property, 221
type, 218 $.mobile.fixedToolbars.hide utility
logo widget method, 220
creating, 204–205 $.mobile.fixedToolbars.show utility
height option, 204–205 method, 220
image option, 204–205 $.mobile.hidePageLoadingMsg utility
width option, 204–205 method, 220
mobileinit event. See also events
$.mobile object, 177
M anonymous callback function, 176
messages custom JavaScript handler, 176
loading, 58 extending, 176–177
suppressing display of, 58 overriding global options, 177
methods versus functions, 10. See also overriding properties, 177
exposed methods; utility methods setting properties, 177
minification, benefit of, 6 updating properties, 177
Mob4Hire crowd testing, 271 using with search filter text, 124–125
mobile devices, list of, 254 $.mobile.path.isAbsoluteUrl utility
$.mobile object method, 220
activePageClass property, 184 $.mobile.path.isRelativeUrl utility
extending, 180 method, 220
loadPage method, 217–220 $.mobile.path.isSameDomain utility
mobileinit event, 177 method, 220
subpageUrlKey property, 183 $.mobile.path.makePathAbsolute utility
$.mobile property, ns, 177 method, 220
mobile simulators $.mobile.path.makeUrlAbsolute utility
finding online, 265–267 method, 220
278 Index
$.mobile.path.parseUrl utility method, 220 navbars
authority property, 221 with button icons and logo in header, 86
directory property, 221 in header toolbars, 85
domain property, 221 and logos in headers, 86
filename property, 221 with wrapping buttons, 85
hash property, 221 navigation bars
host property, 221 creating, 85–86
hostname property, 221 wrapping, 85
href property, 221 nested lists, creating, 109–110
hrefNoHash property, 221 ns option
hrefNoSearch property, 221 $.mobile property, using, 177
password property, 221 using with data- attributes, 25
pathname property, 221 number patterns, using, 135
port property, 221 numbered lists, creating, 109
protocol property, 221 numeric keyboard, 134
search property, 221
username property, 221
mobilephoneemulator.com
O
layout, 265 online emulators, testing with, 268
menu and choices, 265 online simulators
user agent string, 265 Cowemo, 265–266
$.mobile.showPageLoadingMsg utility finding, 265–267
method, 220 Mobile Websites 4U, 267
$.mobile.silentScroll utility method, 220 Opera Mini, 266–267
Mobilizer on/off functionality, adding, 154–155
preview tool, 21 Opera Mini online simulator, 266–267
simulator, 270 organizing information, 100
Mozilla Firefox, Modify Headers add-on, 269 orientation property
multipage template, 34–35, 42–43. See also landscape value, 195
HTML5 template; single-page template portrait value, 195
data-title attribute, 43 orientationchange event, firing, 195–196
linking from single-page template, 46
using with dialog window, 62–63
P
Paca Mobile Center remote lab, 269
N page classes, using, 184–186
name collisions, preventing, 178 page components, 33–34, 161
namespaces. See custom namespaces page data-role attribute, 35–36
- (dash) at end of, 178 page initialization
CSS selectors, 179 autoInitializePage property, 180, 182
customizing, 24–26, 178–179 delaying, 180–182
described, 178 events, 206
navbar value, using with data-role, 85 pagecreate event, 204–206
Index 279
page initialization (continued) altering default transitions, 188–189
pagecreatebefore event, 204–206 caching, 52–54
pageinit event, 204–206 changing programmatically, 210–216
page theming component, 161–162 creating in Drupal, 248–249
page titles, including in header toolbars, 76 horizontal display, 195–196
page transitions. See also webpages linking, 44
attaching event handlers, 200–201 loading, 197–199
binding event handler, 55–56 loading silently, 217–220
code sample, 56–57 loading without displaying, 217–220
defaultPageTransition property, 55 preloading, 52–54
delegate method, 201–202 referencing id value, 44
disabling, 56 as separate pages, 44
events, 200–203 single-page template, 42
fade method, 55 slide default transition, 188
flip method, 55, 57 .support properties, 260
live method, 201 ui-page-active element, 184
on method, 200–201 user agent information, 254
mobileinit event, 57–58 vertical display, 195–196
overriding default, 56 viewing in WordPress, 234
pagebeforehide, 200–203 waiting for loading, 11–12
pagebeforeshow, 200–203 pageshow event, 200–203
pagehide, 200–203 Perfecto Mobile remote lab, 269
pageshow, 200–203 PHP
pop method, 55 browser identification, 255–256
reverse, 56 /i used with regular expressions, 254–255
setting up, 55 mobile detection function, 256
slide method, 55 mobile_detect() function, 254
slidedown method, 55 OR (|) regular expression, 254–255
slideup method, 55 preg_match() function, 255
page2.html file regular expressions, 255
loading, 219 testing search strings, 255
loading silently, 218 URL redirection, 256
pagebeforehide event, 200–203 user agent information, 254
pagebeforeshow event, 200–203 pointer cursor, adding to linked lists,
pagecreate event, 204–206 107–108
pagecreatebefore event, 204–206 pop transition
pagehide event, 200–203 altering, 188
pageinit event using, 55
stage in initialization process, 204–206 using with dialog windows, 68
using with search filters, 126–128 portrait value, using with orientation
pageLoadErrorMessage property, setting, 58 property, 195
pages. See also mobile webpages pound sign (#), including in hyperlinks, 46
activeBtnClass property, 186 preloading pages, 52–54
adding to WordPress, 233–235
280 Index
Q scripts, including, 6
scroll events
queue methods lazy loading effect, 197–199
clearQueue, 13–14 scrollstart, 197
delay, 13 scrollstop, 197
dequeue, 13 SDKs (software development kits)
queue, 13 Android, 270
using, 14 benefits, 270
BlackBerry, 270
R XCode, 270
search filter bar, creating, 122–125
radio buttons, 141–145
search filter text
applying mini, 145
changing, 124
versus checkboxes, 141
custom formatted listview, 125–128
controlgroup data-role groups, 142
mobileinit event, 124–125, 130
disable method, 145
updating, 124
enable method, 145
search filters
events, 145
custom callback function, 129–130
horizontal toggle set, 143–144
customizing, 126–131
legend in fieldset, 142
defaultSearch function, 128–129
questions, 142
filterCallback option, 126
refresh method, 145
id for listview, 126–128
setting theme, 145
logging text, 129
statements, 142
pageinit event, 126–128
versus text inputs, 145
testing with searchValue, 129
ready event, using with documents, 11–12
select menus, 146–151
regular expressions
action sequence, 146
in JavaScript, 257–259
controlgroup in, 149
learning about, 255
corners option, 150
library of, 255
in fieldcontain, 147
testing, 255
formatting, 147
websites, 255
grouping, 148–149
remote labs
horizontally grouped, 149
Keynote DeviceAnywhere, 269
icon option, 150
Paca Mobile Center, 269
iconpos option, 150
Perfecto Mobile, 269
iconshadow option, 150
responsive design, considering, 196
initSelector option, 150
Roberts, Francis, 232
inline option, 150
methods, 151
S mini option, 150
nativeMenu option, 150
Save button. See also buttons
open method, 151
adding to header element, 78–80
options, 150
combining with Delete, 80
overlayTheme option, 150
Index 281
select menus (continued) slideup transition, using, 55
preventFocusZoom option, 150 special effects, applying, 12–14
shadow option, 150 split button lists. See also buttons
theme option, 150 changing default, 113
semantic HTML, 20. See also HTML creating, 112–113
elements with gear icons, 113
Sequel Pro for Mac OS spoofing user agent strings, 269
downloading, 228 step2.php page, emailAddress input, 215–216
using with Drupal, 238 Submit button, 70
using with WordPress, 228 subpages, referencing, 183
simulators, 265. See also testing with subPageUrlKey
simulators customizing, 183
finding online, 265–267 ui-page parameter, 183
Mobilizer, 270 .support method
online, 265–267 ajax feature, 260
using, 264 cors feature, 260
single-page template. See also HTML5 detecting browser features with, 259–260
template; multipage template opacity feature, 260
Ajax-based navigation, 45 properties list, 260
described, 45 submitBubbles feature, 260
dialog windows, 65 swatches. See also ThemeRoller tool
hashtags, 45–46 a-e, 158–159, 162–163
history, 45–46 applying to footer component, 162
linking to multipage template, 46 applying to header component, 162
preloading pages, 54 changing on form elements, 166
slide transition copying, 159
altering, 188 customizing, 158, 160
using, 55 defaults, 158
slidedown transition updating, 158
using, 55 using, 158–160
using with dialog windows, 68 swipe event, described, 192
sliders, 152–154 swipe event properties
creating, 152 durationThreshold, 192
disable method, 154 horizontalDistanceThreshold, 192
disabled option, 153 scrollSupressionThreshold, 192
enable method, 154 verticalDistanceThreshold, 192
events, 154 swipeleft touch event, 192
fill highlight, 153 swiperight touch event, 192
versus flip toggle switches, 155
highlight option, 153
methods, 154
T
options, 153 tap touch event, 192
refresh method, 154 taphold touch event, 192–193
trackTheme option, 153 telephone keypad, 134, 136
282 Index
testing. See also crowd testing updating, 158
on desktop, 264 using, 158–160
with desktop simulators, 270 ThemeRoller tool, 160. See also swatches
with online emulators, 268 themes
testing with simulators. See also desktop adding to WordPress, 231–232
simulators; simulators defining, 158
online emulators, 268 jQuery Mobile for Drupal, 246
options, 264 theming components. See also content
pros and cons, 263 theming; form element theming
remote labs, 269 buttons, 161–162
text inputs, 134–140 content, 163–164
alphabetical keyboard, 135–136 lists, 166–170
bind method for events, 140 page, 161–162
versus checkboxes, 145 toolbar, 161–162
clearSearchButtonText option, 139 $(this) element, using, 9–10, 12
disabled element, 139 thumbnails, adding to list items, 117–118
events, 140 toggle switch, interaction sequence, 155
initSelector option, 137 toolbar components, 33–34
methods, 139 toolbar theming component, 161–162
number patterns, 134–135 toolbars
numeric keyboard, 134 fixed, 83
options, 137–139 footers, 82
preventFocusZoom option, 138–139 fullscreen, 83–84
versus radio buttons, 145 headers, 76–77
regular and mini, 138 positioning, 83–84
setting element types, 134 updating position of, 84
telephone keypad, 134 touch events
theme option, 137 binding, 193–194
type set to number, 134 document.ready event, 193
textinput element swipe, 192
disable method, 139 swipeleft, 192
enable method, 139 swiperight, 192
theme option, 138 tap, 192
using, 137 taphold, 192–193
theme dividers, data-divider-theme, 168 .test-tap-hold class, 193–194
theme forms, creating, 165–170 transitions effects, applying to
theme swatches hyperlinks, 189
a-e, 158–159, 162–163 true/false functionality, adding, 154–155
applying to footer component, 162
applying to header component, 162
changing on form elements, 166
U
copying, 159 ui-bar-a class prefix, using, 92, 98
customizing, 158, 160 ui-block class prefix, using, 90
defaults, 158 ui-btn-icon-right class, 108
Index 283
.ui-dialog classes, using, 67 initial-scale property, 22–23
ui-grid prefix, using, 90–91 maximum-scale property, 23
ui-grid-a class prefix, using, 90 minimum-scale property, 23
ui-grid-c class prefix, using, 97 setting display with, 22
ui-li-count class, using, 115 user-scalable property, 23
ui-li-icon class, using, 118–119 width property, 22–23
ui-listview class, using, 107
ui-page-active element, 184
ui-title class, using with header
W
toolbars, 77 web hosts, choosing for WordPress, 228
url argument, using with loadPage webpages. See also mobile webpages; page
method, 218 transitions
user agent information, obtaining, 254 activeBtnClass property, 186
user agent strings, spoofing, 269 adding to WordPress, 233–235
user profile, modifying, 78–80 altering default transitions, 188–189
utility methods. See also exposed methods; caching, 52–54
methods changing programmatically, 210–216
$.mobile.activepage property, 221 creating in Drupal, 248–249
jqmData, 220 horizontal display, 195–196
jqmRemoveData, 220 linking, 44
$.mobile.base, 220 loading, 197–199
$.mobile.fixedToolbars.hide, 220 loading silently, 217–220
$.mobile.fixedToolbars.show, 220 loading without displaying, 217–220
$.mobile.hidePageLoadingMsg, 220 preloading, 52–54
$.mobile.path.isAbsoluteUrl, 220 referencing id value, 44
$.mobile.path.isRelativeUrl, 220 as separate pages, 44
$.mobile.path.isSameDomain, 220 single-page template, 42
$.mobile.path.makePathAbsolute, 220 slide default transition, 188
$.mobile.path.makeUrlAbsolute, 220 .support properties, 260
$.mobile.path.parseUrl, 220–221 ui-page-active element, 184
$.mobile.showPageLoadingMsg, 220 user agent information, 254
$.mobile.silentScroll, 220 vertical display, 195–196
using, 220–222 viewing in WordPress, 234
waiting for loading, 11–12
websites
V Cowemo online simulator, 265–266
vclick event, using bind method with, 46 Firefox Modify Headers add-on, 269
versions, minified versus source, 6 jQuery Mobile framework, 30
viewport meta tag Keynote DeviceAnywhere, 269
adding properties to, 22 Mob4Hire crowd testing, 271
described, 21 Mobile Websites 4U simulator, 267
height property, 23 mobilephoneemulator.com, 265
including in HTML5 templates, 22 Mobilizer preview tool, 21
284 Index
Mobilizer simulator, 270 DB_USER variable, 229
Mozilla Firefox Modify Headers described, 227
add-on, 269 “Hello world!” blog post, 232
online simulators, 265–267 installing, 228–230
Opera Mini online simulator, 266–267 jqm-wp database, 228
Paca Mobile Center, 269 $jqtheme value, 232
Perfecto Mobile, 269 jQuery Mobile theme, 231
regular expressions, 255 listing blog posts in, 234–235
Sequel Pro for Mac OS, 228 saving blog posts, 233
simulators, 265–267 Sequel Pro for Mac OS, 228
World Wide Web Consortium, 269 setting home page, 235
widgets, customizing, 204–206. See also viewing blog posts, 233
collapsible content widget; jQuery viewing webpages, 234
Mobile widgets web hosts, 228
WordPress. See also CMS (content wp-config.php file, 229
management system) Drupal World Wide Web Consortium, 269
adding themes to, 231–232 wp-config.php file, contents of, 229
blog posts, 233–235 WWW box model, adhering to, 259–260
changing themes, 232
creating webpages, 233–235
creating websites, 228
X
data storage, 228 XCode SDK, 270
database configuration variables, 229 XMLHttpRequest, using with webpages,
database connection, 229 36–37
database login data, 229
DB_HOST variable, 229
DB_NAME variable, 229
Y
DB_PASSWORD variable, 229 yes/no functionality, adding, 154–155
Index 285
Unlimited online access to all Peachpit,
Adobe Press, Apple Training and New
Riders videos and books, as well as content
from other leading publishers including:
O’Reilly Media, Focal Press, Sams, Que,
Total Training, John Wiley & Sons, Course
Technology PTR, Class on Demand, VTC
and more.
Sign up today
peachpit.com /creativeedge