As we saw in the previous example, just adding in jQuery Mobile goes a long way to updating our page for mobile support. But there's a lot more involved to really prepare our pages for mobile devices. As we work with jQuery Mobile over the course of the book, we're going to use various data attributes to mark up our pages in a way that jQuery Mobile understands. But what are data attributes?
HTML5 introduced the concept of data attributes as a way to add ad hoc values to the Document Object Model (DOM). As an example, this is a perfectly valid HTML:
<div id="mainDiv" data-ray="moo">Some content</div>
In the previous HTML, the
data-ray attribute is completely made up. However, because our attribute begins with
data-ray attribute and change the background color to whatever was specified in the value.
This is where jQuery Mobile comes in, making extensive use of data attributes both for markup (to create widgets) and behavior (to control what happens when links are clicked). Let's look at one of the main uses of data attributes within jQuery Mobile—defining pages, headers, content, and footers:
Compare the previous code snippet to
listing 1-2 and you will see that the main difference was the addition of the
div blocks. One
div block defines the page. Notice that it wraps all of the content inside the
body tags. Inside the
body tag, there are three separate
div blocks. One has a role of
header, another a role of content, and the final one is marked as
footer blocks use
data-role, which should give you a clue that we're defining a role for each of the blocks. The center
div block, the one for
content, uses the
role attribute instead of
data-role and adds a class. This is a special exception where jQuery Mobile (most recently) has switched to using a class directly to help speed up the initial layout of the page. As we stated earlier, these data attributes mean nothing to the browser itself, but jQuery Mobile can recognize them and enhance them.
Let's look at the new version of the page:
ui-class style on the main content made use of the CSS provided with the framework. This is a theme you will see repeated again and again as we go through this book. A vast majority of the work you'll be doing will involve the use of data attributes or a bit of CSS.