jQuery Mobile: A basic popup

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

Popups are useful in many ways.

jQM supports various types of popup.  From a small tooltip to a large photo lightbox.

To create a popup, add the data-role=’popup’ attribute to a <div> with the contents.  Then create a link with the href set to the id of the popup <div>, and add the attribute data-rel=’popup’ to tell the framework to open the popup when the link is tapped.

A popup <div> has to be nested inside the same page as the link.

<!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 Popup App</h1>
    </div>
    <br>
    <br>

    <div data-role='content' style='text-align: center'>
        <a href='#popupBasic' data-rel='popup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-transition='pop' >Basic Popup</a>
        <div data-role='popup' id='popupBasic'>
            <p>This is a completely basic popup, no options set.</p>
        </div>
    </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

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.