Improving Navigation Layout

While we won’t spend too much time on it, it is worth having a quick look at ways that we can improve how those navigation controls format. As shown in Figure 12–3, the alignment of the controls is not optimal; also, it is possible for the Next button to wrap over to the next line when a long place name is found.

The good news is that half the work is already taken care of for us thanks to the CSS that is packaged with jQuery Mobile—any text that cannot fit into a button of a particular fixed width (or maximum width) will be shortened with an ellipsis (a series of three dots; see http://en.wikipedia.org/wiki/Ellipsis). All we have to do is appropriately limit the button sizes.

To achieve this, we will use another new CSS3 feature—the flexible box layout (see www.w3.org/TR/css3-flexbox)—combined with some standard CSS rules to control HTML element width.

No changes are required to our HTML, so simply add the following CSS to the end of the moundz.css file:

/* navigation control visual treatment */

#marker-nav a { max-width: 32%; }

#marker-nav a.left, #marker-nav a.right { width: 90px; }

#marker-nav { display: -webkit-box; -webkit-box-pack: center;

} Now, there is nothing overly complicated here. We have a CSS class that tells anchor

tags within the #marker-nav element to have a width no greater than 32 percent (of the parent element). We then override that style for any anchors with left or right classes to set their width manually to 90px.

Finally, we specify a rule that implements some CSS3 flexbox magic for the #marker-nav element. First, we modify the display to -webkit-box (as per the previous CSS3, we prepend the proprietary webkit prefix) and then tell the element that we want to display any child elements in the center of the control. This is done using the -webkit-box-pack rule, and it is set to the value of center.

CHAPTER 12: Polishing and Packaging an App for Release

NOTE: Using the CSS3 flexible box layout is a good option here, but you might be looking at the code and HTML elements involved and wondering why a simple text-align rule wasn’t used. In truth, it could have been in this particular case; however, it doesn’t yield as visually pleasing results given some of the other CSS rules put in place by jQuery Mobile.

As such, we have gone with the CSS3 flexible box layout approach. Here’s some further reading on the topic: www.html5rocks.com/tutorials/flexbox/quick.

Once we have made our changes to the CSS, the button alignment should be much more visually pleasing—as is displayed in Figure 12–4.

Figure 12–4. With some CSS we can constrain our button sizes, replacing overflow text with an ellipsis. With the navigation buttons more attractively displayed, having that Next arrow left-

aligned on the button is standing out more than it did before. Time to do something about that. Thankfully, this is made super simple by jQuery Mobile.

Locate the anchor tag for the Next button in the HTML and simply add a data-iconpos attribute with the value of right to the HTML.

<div id="marker-nav" data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="arrow-l" class="left">Previous</a> <a href="#marker-detail" data-role="button">Info</a> <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right"

class="right">Next</a> </div>

CHAPTER 12: Polishing and Packaging an App for Release

With this trivial change in place, our navigation button now displays with the icon to the right of the button, as shown in Figure 12–5.

Figure 12–5. Our navigation bar is starting to look pretty polished—time to work on the rest of the app.

Improving Navigation Layout