Adding Header And Navigation Elements in Mobile Web Structure

Adding Header And Navigation Elements in Mobile Web Structure

Now that you have the CSS linked up, you can start with the content of the application. First, take a look at the structure of jQuery Mobile CSS pages. For each page, you must follow this format:

<div id=”activity”  data-role=”page”>

div data-role=”header”>

<h1>Page  Title</h1>

</div><!– /header –>


<div data-role=”content”>

<p>Page  content goes here.</p>

</div><!– /content –>


<div data-role=”footer”>

<h4>Page  Footer</h4>

</div><!– /footer  –>


jQuery Mobile introduces new HTML5 attributes that help the JavaScript define how the element are used. For example, data-role defines what type of data is being listed in that element. If you render this page using just this code, you get the content shown in Figure 5-12.

Adding Header And Navigation Elements in Mobile Web StructureFigure 5-12:  The Corks home page

In the header data, add the page title, Corks. Since you want to have a tab bar interface, you can add both the header (page title) and the navigational bar with the following code:

<h1>Your  Activity</h1>

<div data-role=”navbar”  data-iconpos=”bottom”>


<li><a data-icon=”star” class=”ui-btn-active”


<li><a data-icon=”grid”  href=”#manage”>Manage</a></li>

<li><a data-icon=”info”  href=”#find”>Find</a></li>

<li><a data-icon=”gear” href=”#settings”>Settings</a></li>

<li><a data-icon=”search”  href=”#search”>Search</a></li>



From the top, the h1   tag is the title that displays on each page. The next block of code includes the data for the tab bar. Using the data-role of navbar tells jQuery Mobile to format all the elements inside <div> to conform to the navbar CSS styles. Since you plan to use icons on the top of each page, you set the data-iconpos element to top. You could set it bottom if you wanted the icons at the bottom of each button. If you don’t want to include icons in your tab bar, you can remove this attribute all together; it just adds a little more UI to your tab bar to define each button.

Next, you create each tab you want in to the form of a li element inside a ul. To add or remove tabs, add or remove the li elements. To pick which icon gets assigned to each tab, use data-icon to display the icon. The names of the icons refer to the CSS class name and can be customized. You can even use third-party icon sets with a bit of customization.

The app opens to the Activity page, so you need to add the ui-btn-active class to  the li to make this opening page active. You can apply this same logic to any nav bar items and as you build out the navigation on other pages.

After saving and displaying this on the iPhone, you get the page shown in Figure 5-13.

Adding Header And Navigation Elements in Mobile Web Structure1Figure 5-13: Displaying the Manage page in active state

Written by imkits