jQuery Mobile: Header and content with rounded corners

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

We can have rounded corners for both the content and the heading.

This is done by using ui-corner-all in both the heading and the content declaration.

<!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>Grouping Content</h1></div>
    <h3 class='ui-bar ui-bar-a ui-corner-all'>Heading</h3>
    <div class='ui-body ui-body-a ui-corner-all'>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

jQuery Mobile: Header and content

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

In jQM, we can use ui-bar to create a full-width heading.

Add class ui-body to emphasize a section of content.

Additionally, classes ui-body-[a-z] add the appropriate swatch from your theme.

Header and Content
<!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>Grouping Content</h1></div>
    <br>
    <h3 class='ui-bar ui-bar-a'>Heading</h3>
    <div class='ui-body'>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>

</html>
Try The Code

To add a slight change to the heading to have rounded corners.  We can add ui-corner-all.

Try The Code

jQuery Mobile: Inline only buttons using Icons

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

Here we work out some mini-size buttons using only the icons.

Buttons Using Icons
<!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>
    <style>
        .center {
            text-align: center;
        }
    </style>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Grid A</h1></div>
    <br>
    <div class='ui-grid-d center'>
        <div class='ui-block-a'><a class='ui-shadow ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext ui-btn-inline'>Button</a></div>
        <div class='ui-block-b'><a class='ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline'>Button</a></div>
        <div class='ui-block-c'><a class='ui-shadow ui-btn ui-corner-all ui-icon-grid ui-btn-icon-notext ui-btn-inline'>Button</a></div>
        <div class='ui-block-d'><a class='ui-shadow ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext ui-btn-inline'>Button</a></div>
        <div class='ui-block-e'><a class='ui-shadow ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext ui-btn-inline'>Button</a></div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>

</html>
Try The Code

Notice the icons have been centered using text-align:center.
Icon Buttons Output

jQuery Mobile: One button or solo grid

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

For a single button to occupy the entire page, you can use a container with class ui-grid-solo.

Solo Grid
<!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>Grid A</h1></div>
    <br>
    <div class='ui-grid-a'>
        <div class='ui-block-a'><a class='ui-shadow ui-btn ui-corner-all'>Previous</a></div>
        <div class='ui-block-b'><a class='ui-shadow ui-btn ui-corner-all'>Next</a></div>
    </div>
    <div class='ui-grid-solo'>
        <div class='ui-block-a'><input type='button' value='More'></div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code Solo Grid Output

jQuery Mobile: Multiple Row Grids

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

Grids are designed to wrap to multiple rows of items.

For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each.

Multiple Row Grids
<!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>Grid C</h1></div>
    <br>
    <div class='ui-grid-b'>
        <div class='ui-block-a'><div class='ui-bar ui-bar-a' style='height:60px'>Block A</div></div>
        <div class='ui-block-b'><div class='ui-bar ui-bar-a' style='height:60px'>Block B</div></div>
        <div class='ui-block-c'><div class='ui-bar ui-bar-a' style='height:60px'>Block C</div></div>
        <div class='ui-block-a'><div class='ui-bar ui-bar-a' style='height:60px'>Block A</div></div>
        <div class='ui-block-b'><div class='ui-bar ui-bar-a' style='height:60px'>Block B</div></div>
        <div class='ui-block-c'><div class='ui-bar ui-bar-a' style='height:60px'>Block C</div></div>
        <div class='ui-block-a'><div class='ui-bar ui-bar-a' style='height:60px'>Block A</div></div>
        <div class='ui-block-b'><div class='ui-bar ui-bar-a' style='height:60px'>Block B</div></div>
        <div class='ui-block-c'><div class='ui-bar ui-bar-a' style='height:60px'>Block C</div></div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

We need only one line of code <div class=’ui-grid-b’> to define the the 3-column grid style.

After that, we can assign the block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type.