jquerymobile-19 使用网格(grid)显示页面

本文链接：https://blog.csdn.net/mengxiangyue/article/details/8596072

本文介绍了一个使用jQuery Mobile进行网格布局的例子。通过简单的CSS类实现了响应式网页设计中的两列布局。该示例展示了如何利用.ui-grid-a和.ui-block-a等类创建不同列数的网格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在jquerymobile中我们如果使用网格去布局页面，jqm中提供了比较简单的网格布局。只要使用简单的CSS类就可以了。下面看一个例子代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Grid Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="first">
	<div data-role="header">
		<h1>Grid Test</h1>
	</div>
	<div data-role="content">
		<div class="ui-grid-a">
			<div class="ui-block-a">
			<p>
			测试
			</p>
			</div>
			<div class="ui-block-b">
			<p>
巩固完善基本药物制度和基层运行新机制是“十二五”期间深化医药卫生体制改革的重点，是实现2020年人人享有基本医疗卫生服务目标的重要基础。医改实施三年多来，基层医疗卫生机构综合改革全面推进，初步建立了基本药物制度，构建了维护公益性、调动积极性、保障可持续的基层运行新机制。为进一步深化改革，扩大医改成果，现就巩固完善基本药物制度和基层运行新机制提出如下意见。			
			</p>
			</div>
		</div>
	</div>
</div>
</body>
</html>

代码中被<div class="ui-grid-a">包围的将会分成两列，但是必须配合<div class="ui-block-a">才会起作用。这里ui-grid-a代表分为两列、ui-grid-b代表分为三列，以此类推。ui-block-a、ui-block-b、ui-block-c等分别代表第一列、第二列、第三列，以此类推。

代码效果如下：