How to Use jQuery Mobile Grid and Columns Layout

Exclusive offer: get 50% off this eBook here
jQuery Mobile First Look

jQuery Mobile First Look — Save 50%

Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development

$23.99    $12.00
by Giulio Bai | July 2011 | Open Source

The jQuery Mobile framework provides a number of tools, widgets, and components which are extremely helpful in formatting our content and make it look elegant and put-together even on our beloved smaller-screen devices – well, especially for them!

In this article by Giulio Bai, author of jQuery Mobile First Look, we will explore:

  • How content is displayed
  • Using columns and grids
  • Creating grids with more than two columns

 

jQuery Mobile First Look

jQuery Mobile First Look

Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development

        Read more about this book      

(For more resources on this subject, see here.)

Trying to communicate and provide information in an effective way can be a little trickier when we are targeting mobile devices; their screens are relatively small (ridiculously small if we think about our 24 inch iMac resting on our office desk), and we have already understood that we cannot display content in the way we used to, back in the days when desktop computers were the only way to access data on the Internet.

With the advent of mobile browsing, new solutions had to be found.

The jQuery Mobile framework provides a number of tools, widgets, and components which are extremely helpful in formatting our content and make it look elegant and put-together even on our beloved smaller-screen devices – well, especially for them!

In fact, the difficulty in designing, formatting, and correctly showing a page on a mobile device is going to become a no-brainer using the set of elements jQuery Mobile provides in order to allow for an easy styling of our web application content.

How content is displayed

Yes, there is nothing wrong in just writing down what our website or web application is about in the HTML file. It's always worked and always will.

The actual point here is taking advantage of the tools jQuery Mobile offers us to format our information, specifically for mobile devices.

For example, there are occasions in which the need for multiple columns may arise: we can use a layout grid, which is nothing more than some CSS-based columns.

Or, on a completely different note, we might just need to hide/show a block of content: collapsible blocks have been designed for this, and can be easily implemented in our site layout.

But before we begin analyzing any of the methods in which we are able to format our content according to our liking, we should take a look at how content is displayed in its basic HTML formatting.

Based upon the "light hand approach" (as they call it), jQuery Mobile lets the browser rendering take precedence over any other third-party styling, with exceptions made for the following little tweaks the framework applies to any page by default:

  • Adding a bit of padding for a better readability
  • Using the theming system to apply fonts and colors

This particular approach to styling by default should make the designers really happy, as they often find themselves fighting with preset colors schemes, default fonts, weird margin, and padding values and usually end up resetting everything and starting again from scratch.

Thankfully, the default padding value looks quite right and, as far as theming goes, we are able to easily customize (and create new) themes through CSS files and a theming framework which is extremely versatile and flexible.

Default HTML markup styling

So, what happens if we just write some HTML markup and want some text to be bold, emphasized, or hyper-linked? jQuery Mobile applies some basic styling to the elements and makes their look consistent with the simple and clean layout we have already seen in action.

The following screenshot represents how headings and standard paragraphs are displayed and generated by the following code:

<!DOCTYPE html>
<html>
<head>
<title>Default HTML markup styling</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/
jquery.mobile-1.0a2.min.css" />
<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/mobile/1.0a2/jquery.mobile-
1.0a2.min.js"></script>
</head>

<body>
<div data-role="page" id="home">
<div data-role="content">
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
<p>This is a paragraph. <strong>Lorem (bold)</strong> <em>ipsum
(emphasized)</em> <a href="#">dolor (link)</a> sit amet, consectetur
adipiscing elit.</p>

<blockquote>Blockquote containing a <cite>cite</cite></
blockquote>

<p>This is a paragraph. <strong>Lorem (bold)</strong> <em>ipsum
(emphasized)</em> <a href="#">dolor (link)</a> sit amet, consectetur
adipiscing elit.</p>
</div>
</div>
</body>
</html>

The result is shown in the following screenshot:

jQuery Mobile tutorial on Grid Layout Theming Content

Similarly, the following code produces a preview of what lists and tables look like:

<!DOCTYPE html>
<html>
<head>
<title>Default HTML markup styling</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/
jquery.mobile-1.0a2.min.css" />

<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://code.jquery.com/mobile/1.0a2/jquery.mobile-
1.0a2.min.js"></script>
</head>

<body>
<div data-role="page" id="home">
<div data-role="content">
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
<table>
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Phone</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">Table foot</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">David Green</th>
<td>New York City, NY</td>
<td>555-0123</td>
</tr>
<tr>
<th scope="row">Martha White</th>
<td>Los Angels, CA</td>
<td>555-0188</td>
</tr>
<tr>
<th scope="row">Bobby Brown</th>
<td>Washington, D.C.</td>
<td>555-0110</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

jQuery Mobile tutorial on Grid Layout Theming Content

jQuery Mobile First Look Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development
Published: June 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on this subject, see here.)

Using columns and grids

Even with no additional CSS code, jQuery Mobile formats our content in a simple, yet clean way. This also makes the text easier to read on mobile devices.

During the development of our web application, there might be times when we just need to place certain elements in a particular position, which would require a certain fluency in CSS (which we might not have).

Thankfully, jQuery Mobile provides a quick way to create a sort of grid layout: it applies a set of CSS rules with which we are able to obtain columns and rows to display our content as if it was in a table:

jQuery Mobile tutorial on Grid Layout Theming Content

The page pictured above shows a 3x3 grid themed with Swatch B colors applied.

The use of grids, though perfectly legitimate, is somewhat discouraged, due to the narrow screen width, which is a feature common to all the mobile devices.

In short:

  • They are useful for displaying any sort of content which needs to be presented side by side (buttons and navigation bars are an example)
  • They have no margins, no padding, no borders, and no background
  • They, in general, do not interfere with any styling
  • They are 100 percent wide
  • They can have two, three, four, or five columns
  • They can have multiple rows

How to create a simple grid with buttons

We'll begin by creating a simple grid with one row and two columns, each of which will contain a button:

  1. In order to tell jQuery Mobile we want a two-column layout, we need to give a div the ui-grid-a class. This way, jQuery mobile will apply to the children divs (that is, our blocks or cells) the CSS rules necessary to take up 50 percent of the screen.

    <div class="ui-grid-a">
    <!-- blocks go here -->
    </div>

  2. Depending on the number of columns we have specified, we are able to add our cells to the grid. For each cell, we need to specify the ui-block-X class, where X is a lowercase letter from a to z. The first block will be assigned the letter a, the second one will have a b, and so on:

    <div class="ui-grid-a">
    <div class="ui-block-a"></div>
    <div class="ui-block-b"></div>
    </div>

  3. Next we add the buttons (one for each block), which is a fairly straightforward task:

    <div class="ui-grid-a">
    <div class="ui-block-a">
    <button type="submit">Click me!</button>
    </div>
    <div class="ui-block-b">
    <button type="submit">Clicky clicky</button>
    </div>
    </div>

    jQuery Mobile tutorial on Grid Layout Theming Content

  4. We can obviously apply any theme we wish to the buttons, in order to make them stand out more or just as a style improvement:

    <div class="ui-grid-a">
    <div class="ui-block-a">
    <button type="submit" data-theme="a">Click me!</button>
    </div>
    <div class="ui-block-b">
    <button type="submit" data-theme="b">Clicky clicky</button>
    </div>
    </div>

    jQuery Mobile tutorial on Grid Layout Theming Content

Creating grids with more than two columns

The preset configuration layouts also comprehend grids with three, four, and five columns.

Needless to say, there is hardly any use at all for grids with four or five columns on devices that, by definition, have a small screen, but three-column layouts may come in handy sometimes.

Creating grids with multiple columns is no different from creating a simple two-column grid — we only need to change the class.

We use letters from b to d to create grids with a number of columns from three to five.

In fact, jQuery Mobile has a set of CSS rules that make sure the grid always takes up the full width of the screen and all of the blocks have the same width too:

  • Our first step towards the realization of a four-column grid with two rows is creating a div element which has a ui-grid-c class:

    <div class="ui-grid-c">
    <!-- we can have rows of four blocks in here! -->
    </div>

  • As we have split the page up into four parts (25 percent wide each), we are able to fit four blocks for each row in the grid (letters from a through d):

    <div class="ui-grid-c">
    <div class="ui-block-a">
    <p>First block, First row (A)</p>
    </div>
    <div class="ui-block-b">
    <p>Second block, First row (B)</p>
    </div>
    <div class="ui-block-c">
    <p>Third block, First row (C)</p>
    </div>
    <div class="ui-block-d">
    <p>Fourth block, First row (D)</p>
    </div>
    </div>

    jQuery Mobile tutorial on Grid Layout Theming Content

  • As for creating rows other than the first one, we just need to insert other blocks, repeating the letters we have already used. jQuery Mobile automatically recognizes our attempt at inserting a new row and breaks the line, so any time we add a block with the letter a, a new row is appended to the grid:

    <div class="ui-grid-c">
    <div class="ui-block-a">
    <p>First block, First row (A)</p>
    </div>
    <div class="ui-block-b">
    <p>Second block, First row (B)</p>
    </div>
    <div class="ui-block-c">
    <p>Third block, First row (C)</p>
    </div>
    <div class="ui-block-d">
    <p>Fourth block, First row (D)</p>
    </div>

    <!-- second row -->
    <div class="ui-block-a">
    <p>First block, Second row (A)</p>
    </div>
    <div class="ui-block-b">
    <p>Second block, Second row (B)</p>
    </div>
    <div class="ui-block-c">
    <p>Third block, Second row (C)</p>
    </div>
    <div class="ui-block-d">
    <p>Fourth block, Second row (D)</p>
    </div>
    </div>

    jQuery Mobile tutorial on Grid Layout Theming Content

Using the same method, we can easily create grids with multiple columns and rows to easily align elements we absolutely need to display one next to another.

Summary

Dealing with content and displaying it on our page using jQuery Mobile is, as we've seen, fairly easy.

In the next article we we will cover Collapsible Blocks and Theming Content.


Further resources on this subject:


jQuery Mobile First Look Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development
Published: June 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Giulio Bai

Giulio Bai is a law student living in Italy who spends most of his time toying with stuff that doesn't have anything to do with law.

Even after trying to keep the list of his past achievements as short as possible, the number of projects that he joined in (and that invariably sunk shortly thereafter) makes it hard to narrow down his interests to programming and carousels alone.

It should be made clear that any claim of responsibility for those unfortunate ventures is wholeheartedly rejected – they never had the necessary potential to make it anyway.

Books From Packt


iPhone JavaScript Cookbook
iPhone JavaScript Cookbook

Sencha Touch 1.0 Mobile JavaScript Framework
Sencha Touch 1.0 Mobile JavaScript Framework

Android 3.0 Application Development Cookbook
Android 3.0 Application Development Cookbook

Xcode 4 iPhone Development Beginner's Guide
Xcode 4 iPhone Development Beginner's Guide

jQuery 1.4 Animation Techniques: Beginners Guide
jQuery 1.4 Animation Techniques: Beginners Guide

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

PhoneGap Beginner's Guide: RAW
PhoneGap Beginner's Guide: RAW

Android User Interface Development: Beginner's Guide
Android User Interface Development: Beginner's Guide


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software