jQuery Mobile Grid Layout
jQuery Mobile provides a set of column layouts based on CSS. However, on mobile devices, due to the narrow screen width of mobile phones, it is generally not recommended to use column layout.
But sometimes you want to arrange smaller elements (like buttons or navigation labels) side by side, as if in a table. In this case, it is recommended to use column layout.
The columns in the grid are equal width (totaling to 100%) and have no borders, backgrounds, margins or padding.
There are four layout grids available:
| Grid Class | Columns | Column Width | corresponds to | Instance |
|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c| d|e | Try it |
 | ##Inside the column container , the class owned by the child element is ui-block-a|b|c|d|e depending on the number of columns. The columns will float side by side.
Example 1:class is ui-grid-a (two-column layout), you must specify the two child elements of ui-block-a and ui-block-b.
Example 2:class is ui-grid-b (three-column layout), then you must add the three elements of ui-block-a, ui-block-b and ui-block-c. child elements. |
|---|
Custom Grid
By using CSS you can customize column blocks:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>自定义列</h1>
</div>
<div data-role="main" class="ui-content">
<p>三列样式布局：</p>
<div class="ui-grid-b">
<div class="ui-block-a"><span>第一个列</span></div>
<div class="ui-block-b"><span>第二个列</span></div>
<div class="ui-block-c"><span>第三个列</span></div>
</div>
</div>
</div>
</body>
</html>Click the "Run Example" button to view the online example
You can also customize the block by using inline styles:
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
Multiple rows
There can also be multiple rows in a column.
Note: ui-block-a-class always creates a new line:
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>多行</h1>
</div>
<div data-role="main" class="ui-content">
<p>三列布局:</p>
<div class="ui-grid-b">
<div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div>
<div class="ui-block-b" style="border:1px solid black;"><span>一些文本</span></div>
<div class="ui-block-c" style="border:1px solid black;"><span>一些文本</span></div>
</div>
<p>多行的三列布局:</p>
<div class="ui-grid-b">
<div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div>
<div class="ui-block-b" style="border:1px solid black;"><span>一些文本</span></div>
<div class="ui-block-c" style="border:1px solid black;"><span>一些文本</span></div>
<div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div>
<div class="ui-block-b" style="border:1px solid black;"><span>一些文本</span></div>
<div class="ui-block-a" style="border:1px solid black;"><span>一些文本</span></div>
</div>
</div>
</div>
</body>
</html>
Click the "Run Instance" button to view the online instance
Responsive Grid
On small screens, it is not recommended to have too many buttons side by side in one row (the text will be shortened).
We use the ui-responsive class in the container to create a responsive grid:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>响应式布局</h1>
</div>
<div data-role="main" class="ui-content">
<h3>慢慢重置窗口大小。布局会根据浏览器的宽度变化自适应大小。</h3>
<div class="ui-grid-b ui-responsive">
<div class="ui-block-a">
<a href="#" class="ui-btn ui-corner-all ui-shadow">第一列按钮</a><br>
<span>第一列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn ui-corner-all ui-shadow">第二列按钮</a><br>
<span>第二列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span>
</div>
<div class="ui-block-c">
<a href="#" class="ui-btn ui-corner-all ui-shadow">第三列按钮</a><br>
<span>第三列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span>
</div>
</div>
</div>
</div>
</body>
</html>
Click the "Run Instance" button to view the online instance
