Before moving on to the company details page, I want to make a few minor additions to the first screen. First is the header. A header in JQM is pretty easy to add with the following bit of code:

<div  data-position="fixed" data-role="header">
   <h1>Customers On the GO!</h1>
</div><!-- /header -->

Stick this inside the div marked with data-role=’page’ and you’re done! Having a header that sticks as you navigate around gives you a nice place to stick buttons or other information and keeps the UI consistent as you move through the app. the data-position=’fixed’ tells JQM to keep the bar on the screen even when the user scrolls. This way the header bar is always visible, so any actions you put there are also always accessible.

The next is a footer. The footer is the same as a header, but at the bottom.

<div  data-position="fixed" data-role="footer">
   <h1></h1>
</div><!-- /footer-->

Right now there is nothing in the footer, but I’ll add stuff on the next page. Leaving the empty <h1> there makes sure that JQM actually adds the black bar.