We learn grid layout to fit out content well on any mobile/tablet screen in Jquery mobile. The classes are used for making a grid layout.
First, we will create a container for the row. And then this row will have columns. The number of columns we can create in a row depends on the row's class value. Here are some value of container/row and the number of columns you can create in.
| Class="value" | Number of Columns |
|---|---|
| class="ui-grid-solo" | 1 |
| class="ui-grid-a" | 2 |
| class="ui-grid-b" | 3 |
| class="ui-grid-c" | 4 |
| class="ui-grid-d" | 5 |
| class="ui-grid-e" | 6 |
For example, <div class="ui-grid-solo"></div> is the container or you can say row. You see class="ui-grid-solo" so that only one column can be created in it.
To create columns in row, we use class="ui-block-a" for first column, class="ui-block-b" for second column and so on.
We use DIV element whether we are creating container/row or column/block.
Grid layout for single column
Example-
<!DOCTYPE html>
<html>
<head>
<title>Jquery Mobile</title>
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed"><h1>Jaischool</h1></div>
<div data-role="main" class="ui-content">
<div class="ui-grid-solo">
<div class="ui-block-a">
<button>Single Column</button>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed"><h2>Home footer</h2></div>
</div>
</body>
</html>Grid layout for two columns
Example:-
<div class="ui-grid-a">
<div class="ui-block-a"><button>First</button></div>
<div class="ui-block-b"><button>Second</button></div>
</div>Grid layout for three columns
Example~
<div class="ui-grid-b">
<div class="ui-block-a"><button>First</button></div>
<div class="ui-block-b"><button>Second</button></div>
<div class="ui-block-c"><button>Third</button></div>
</div>Grid layout for four columns
Example-
<div class="ui-grid-c">
<div class="ui-block-a"><button class="ui-btn ui-icon-home ui-btn-icon-notext">One</button></div>
<div class="ui-block-b"><button class="ui-btn ui-icon-home ui-btn-icon-notext">Two</button></div>
<div class="ui-block-c"><button class="ui-btn ui-icon-home ui-btn-icon-notext">Three</button></div>
<div class="ui-block-d"><button class="ui-btn ui-icon-home ui-btn-icon-notext">Four</button></div>
</div>Note*** When you have a container for two columns and add three columns then the third column will break the line. This method is not wrong, you can use it.
Publish A Comment