Grid Layout In Jquery Mobile
Today I will explain to you how to use Jquery Mobile Grid layout, which allows to build multiple columns ranges between two to five columns .
We need this technique to place small elements side-by-side (like hours, minutes and seconds text box groups).
Jquery mobile provides a block style class called ui-grid, this class is the core of grid layout. It is 100% width, with no borders or backgrounds, and without padding or margins.
To build two columns layout, we can use ui-grid-a. The others can be used as the following:
|
class |
Layout |
Width |
|
ui-grid-a |
Two-column |
50/50% |
|
ui-grid-b |
Three-column |
33/33/33% |
|
ui-grid-c |
Four-column |
25/25/25/25% |
|
ui-grid-d |
Five-column |
20/20/20/20/20% |
For example, we can use ui-grid-a as the following:
<div class="ui-grid-a">
</div>
Inside this two-column layout, we can place the two columns.
<div class="ui-grid-a">
<div class="ui-block-a">
Left Block</div>
<div class="ui-block-b">
Right Block</div>
</div>
Ui-block-a class says: this is the first column in the grid, and ui-block–b is the second one in the same grid.
Here you can find that ui-block changes the CSS Clear property to the left. This property specifies the left side of the element, where other floating elements are not allowed.
Furthermore, you can give that block a style by using ui-bar class by default without having any style. You can also assign any style to the block (like height, background, etc):
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-b">Left Block</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-b">Right Block</div>
</div>
</div>
The layout would be like this:
Apply Grid to Content Container:
Grid classes can be applied to any container. In the previous example, I used it with Fieldset and applied the block to the two buttons.
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button type="button" data-theme="b">Add</button></div>
<div class="ui-block-b">
<button type="button" data-theme="e">Delete</button></div>
</fieldset>
You will find that every block -div- is stretched to 50% of the screen width. In the same way, we can create a three-column layout for time entry: <fieldset class="ui-grid-b">
<div class="ui-block-a">
<label id="Label10" for="txtHours">
Time</label></div>
<div class="ui-block-b">
<input type="text" name="txtHours" id="txtHours" value="12" style="width:40px" maxlength="2" /> </div>
<div class="ui-block-c">
<input type="text" name="txtMinutes" id="txtMinutes" value="00" style="width:40px" maxlength="2" /></div>
</fieldset>
The letters sequence after ui-block
class refers to the column number. So, “a" refers to the fist column,
"b" to the second one, and so on. In this way we can create multiple
rows of items.
There is an important thing by using multiple
rows of items. ui-block-a CSS Class is used to clear the floats and start a new line.
Therefore the sequence is important to build the items.
Here you can find an example of multiple rows of items:
<div data-role="content">
<fieldset class="ui-grid-b">
<div class="ui-block-a">
<img alt="" src="images.jpg" style="width: 80px; height: 80px" />
</div>
<div class="ui-block-b">
<img alt="" src="images.jpg" style="width: 80px; height: 80px" />
</div>
<div class="ui-block-c">
<img alt="" src="images.jpg" style="width: 80px; height: 80px" />
</div>
<div class="ui-block-a">
<img alt="" src="images.jpg" style="width: 80px; height: 80px" />
</div>
<div class="ui-block-b">
<img alt="" src="images.jpg" style="width: 80px; height: 80px" />
</div>
<div class="ui-block-a">
<img alt="" src="images.jpg" style="width: 80px; height: 80px" />
</div>
</fieldset>
The layout would be like this:
Note that how a new line is started in the third line by using ui-block-a CSS Class.
Hope that helps.