jQuery Mobile: Navigation bar and header in swatch b

This entry is part 55 of 73 in the series jQuery Mobile

As a navigation bar, it might actually be better to use a different theme to differentiate it from the rest of the page.

A swatch is a combination or a collection of colors.  When they are combined together, it becomes a theme.

Here we use swatch b for the header and the navigation bar.

Navigation Bar
DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Welcome To My Mobile App</h1>
    </div>
    <div class='ui-body-b ui-body'>
        <div data-role='navbar'>
            <ul>
                <li><a href='#' data-icon='grid'>A</a></li>
                <li><a href='#' data-icon='star'>B</a></li>
                <li><a href='#' data-icon='gear'>C</a></li>
                <li><a href='#' data-icon='arrow-l'>D</a></li>
                <li><a href='#' data-icon='arrow-r'>E</a></li>
            </ul>
        </div><!-- /navbar -->
    </div>

    <div data-role='content'>
        <p>You can put your content here...</p>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

For the header, we have used data-theme=’b’ and for the navigation bar, we have used class=’ui-body-b’,

jQuery Mobile: Navigation bar icon positioning

This entry is part 54 of 73 in the series jQuery Mobile

Using our previous example where we put the navigation bar in the footer, we set the icon position of the bar to either the left or the right.

In the below example, we put it on the right hand side of the button.

Navigation Bar Icon Position
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'>
        <h1>Welcome To My Mobile App</h1>

    </div>

    <div data-role='content'>
        <p>You can put your content here...</p>
    </div>

    <div data-role='footer' data-position='fixed'>
        <div data-role='navbar' data-iconpos='right'>
            <ul>
                <li><a href='#' data-icon='grid'>Summary</a></li>
                <li><a href='#' data-icon='star' class='ui-btn-active'>Favs</a></li>
                <li><a href='#' data-icon='gear'>Setup</a></li>
            </ul>
        </div><!-- /navbar -->
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

To put the icons on the left, we just have to modify line 21 to data-iconpos=’left’.

Icon Position

jQuery Mobile: Navigation bar in the footer

This entry is part 53 of 73 in the series jQuery Mobile

We can also set the navigation in the footer.

We will still have the footer there and we will put the navigation bar right on top of the footer and they are both fixed.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'>
        <h1>Welcome To My Mobile App</h1>

    </div>

    <div data-role='content'>
        <p>You can put your content here...</p>
    </div>

    <div data-role='footer' data-position='fixed' style='overflow:hidden;'>
        <div data-role='navbar'>
            <ul>
                <li><a href='#'>One</a></li>
                <li><a href='#'>Two</a></li>
                <li><a href='#'>Three</a></li>
            </ul>
        </div>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div><!-- /footer -->
</div>

</body>
</html>
Try The Code

Notice that the navbar is under the footer division and the footer has a fixed data position.

jQuery Mobile: Navigation bar

This entry is part 51 of 73 in the series jQuery Mobile

jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar.

A navbar is coded as an unordered list of links wrapped in a container element that has the data-role=’navbar’ attribute.

To set an item to the active state, add class=’ui-btn-active’ to an anchor in the markup. 

In an earlier example, we have made some brief introduction to navbar.  We make some slight change to this example by adding class=’ui-btn-active’ to set the first home button to active state.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'>
        <h1>Welcome To My Mobile App</h1>
        <div data-role='navbar'>
            <ul>
                <li><a href='#' data-icon='home' class='ui-btn-active' >Home</a></li>
                <li><a href='#' data-icon='arrow-r'>Latest Posts</a></li>
                <li><a href='#' data-icon='search'>Search</a></li>
            </ul>
        </div>
    </div>

    <div data-role='content'>
        <p>You can put your content here...</p>
    </div>

    <div data-role='footer'>
        <h1>My Footer</h1>
    </div>
</div>

</body>
</html>
Try The Code