Skip to Main Content
jQuery Mobile: Up and Running
book

jQuery Mobile: Up and Running

by Maximiliano Firtman
February 2012
Beginner to intermediate content levelBeginner to intermediate
272 pages
6h 20m
English
O'Reilly Media, Inc.
Content preview from jQuery Mobile: Up and Running

Columns

jQuery Mobile offers us some templates to define content to be shown in columns, called layout grids. These grids act like a table without the semantic problem of using table (please, don’t use table for anything besides tabular data).

Warning

Remember that you are on a mobile device; columns should be used with care, only to place small elements such as buttons, links, or small items. If you are targeting tablets, you have more space for columns.

The layout grid method uses CSS classes to define grid areas and columns. We can define grids from two up to five columns. Each grid is invisible, uses the whole 100% width, and has no padding or margin defined.

To create a grid, just use a block container, typically a div, with a class of ui-grid-a for two columns, ui-grid-b for three columns, ui-grid-c for four columns and ui-grid-d for five columns. Every grid will divide, by default, the width into equal-width columns.

Every cell should be a block container using ui-block-<letter> with <letter> being from a to d being the first to the fifth column on the grid.

Let’s try a basic two-column example using the HTML5 new element section, as we can see in Figure 3-16:

<div data-role="content">
  <section class="ui-grid-a">
    <div class="ui-block-a">Column 1</div>
    <div class="ui-block-b">Column 2</div>
  </section>
</div>
We can align elements in up to five equal-sized columns

Figure 3-16. We can align elements in up to five equal-sized columns

The layout ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

jQuery Mobile

jQuery Mobile

Jon Reid

Publisher Resources

ISBN: 9781449331085Supplemental ContentErrata Page