JQuery Mobile Part 2: Grids

JQuery Mobile incorporates a grid feature for laying out content.  It’s important to think of grids not as a grid for binding data, like the jqGrid.  A grid is more like a Twitter Bootstrap grid, where the a grid defines evenly-spaced columns.  For instance, if we wanted to define a two-column grid, we can use the following below:

<div class=”ui-grid-a”>
<div class=”ui-block-a”>First Name</div>
<div class=”ui-block-b”><input id=”FirstName” type=”text” /></div>
<div class=”ui-block-a”>Last Name</div>
<div class=”ui-block-b”><input id=”LastName” type=”text” /></div>
<div class=”ui-block-a”>Email</div>
<div class=”ui-block-b”><input id=”Email” type=”text” /></div>
</div>

Everything JQuery Mobile uses here is convention-based.  To define a grid, we use the ui-grid-X class, where X is a value between a and d.  A grid ending in “a” is a two-column grid, whereas a grid ending in “d” is a five-column grid.  Each column is evenly spaced, but also needs a CSS class to ensure the proper spacing.  Notice there are multiple elements defining a ui-block class, which defines each individual cell.  Each cell must use a suffix between “a” and “e”, depending on the number of cells.  For instance, ui-grid-a, a two-column grid, only uses two cells.  Only ui-block-a and ui-block-b are used in this case, otherwise the elements may not render correctly.  Similarly, if we were using ui-grid-c, we’d use ui-block-a, ui-block-b, ui-block-c, and ui-block-d, excluding ui-block-e which is only used for a 5 column grid (ui-grid-c is four columns).

Notice there is no explicit row designator.  JQuery Mobile is plenty capable of determining this.  Also, it’s possible to omit cells; JQuery Mobile will be able to handle scenarios where there is a 5-column grid, but only three cells included.

<div class=”ui-grid-d”>

<div class=”ui-block-a”>
First Cell
</div>
<div class=”ui-block-b”>
Second Cell
</div>
<div class=”ui-block-c”>
Third Cell
</div>
<div class=”ui-block-d”>
Fourth Cell
</div>
<div class=”ui-block-e”>
Fifth Cell
</div>

</div>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s