Information Technology Reference
In-Depth Information
hands of developers and place all that grunt work into the hands of the framework, so
you can spend more time focusing on other items and features that might be more
important to your application. Creating a series of touch-optimized widgets and user
interface elements, jQuery Mobile is quickly shaping up to be one of the top contenders
in the mobile javascript framework space.
One of the best features of jQuery Mobile, however, is its very simple and easy to modify
templating structure. With a little bit of CSS knowhow, a developer can easily modify the
styles of their jQuery Mobile theme to look however they want. This is great for people
like me who like to get their hands dirty and muck around through the innards of any
piece of code they touch. On the other hand, as we'll see shortly, creating a custom
theme is by no means difficult—in fact, we don't have to touch the CSS at all if we don't
want to!
On top of all of this, jQuery Mobile is an incredibly easy framework to get up and
running. All one needs to do to get started is to include the jQuery Mobile source files in
the header of their documents and then use special data attributes in their HTML
markup. Data attributes are a fun addition to HTML5. In XML, and previous versions of
HTML, formally defined attributes were used within tags to describe data or the
formatting of data. While it was always possible in previous versions of HTML to add
custom attributes to your HTML code, it was always frowned upon.And, more often than
not, if your code was run through a validation program,it would end up spitting up errors
left and right.Listing 7-1 shows an invalid custom “mood” attribute, and Listing 7-2
shows how a valid “data-mood” attribute can be used in HTML5.
Listing 7-1.
An example of an invalid custom attribute in HTML
<div class="post" mood="awesome">
<h1>Today was an awesome day!</h1>
<p>Suspendisse consectetur consequat risus non viverra. Phasellus ligula urna, egestas
porttitor facilisis vel, euismod sit...</p>
</div>
Listing 7-2.
An example of an valid custom attribute in HTML5
<div class="post" data-mood="awesome">
<h1>Today was an awesome day!</h1>
<p>Suspendisse consectetur consequat risus non viverra. Phasellus ligula urna, egestas
porttitor facilisis vel, euismod sit...</p>
</div>
Let's take a look at the preceding code example. In the first attempt at writing the code,
we are creating a div container with an invalid custom attribute attached to it, to indicate
the mood of the individual creating this blog entry. While there is nothing stopping us
from using this whimsically created mood attribute, the code would not validate with
popular validation engines such as the W3c Markup Validation Service
attribute of the HTML spec. After years of complaining from developers left and right,
the Powers That Be decided to take a little bit of pity on us developers and gave us the
ability to finally create custom attributes to attach to our code. These new data
attributes could be used by a developer to add any sort of data to their markup code
