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-, it is also completely legal. So, what happens when you view this in your browser? Nothing! The point of these data attributes is to integrate with other code, like JavaScript that does whatever it wants with them. So, for example, you could write JavaScript that finds every item in the DOM with the 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:
Listing 1-3: test3.html
<!DOCTYPE html>
<html>
<head>
<title>First Mobile Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Welcome</h1></div>
<div role="main" class="ui-content">
<p>
Welcome to our first mobile web site.
It's going to be the best site you've ever seen.
Once we get some content. And a business plan.
But the hard part is done!
</p>
</div>
<div data-role="footer">
<h4>Copyright Megacorp © 2015</h4>
</div>
</div>
</body>
</html>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. The header and 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:
Notice right away that both the header and footer now have a gray background applied to them. This makes them stick out even more from the rest of the content. Speaking of content, the page text now has a bit of space between it and the sides. The header and footer were enhanced automatically by the jQuery Mobile JavaScript library, while the use of the 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.