大家好，很高兴又与大家见面了，今天我要给大家展示的是自己对jquery moblie中网格布局的理解。可能不是尽善尽美，希望大家多多体谅！
在jquery moblie中有两种布局，一种是表格布局（网格布局），一种是分栏布局。虽然通过表格方式可以实现多行多列的内容呈现，但是代码毕竟不够简洁。另外，通过表格方式辅助内容排版还存在这样两个可能的弊端，呈现和渲染表格的速度在移动设备中通常比较耗时和消耗资源 通过表格进行排版的内容，搜索引擎友好型通常不怎么好jQuery Mobile通过支持分栏和网格布局，提供了简单而有效的界面排版方式。这种方式对于之前通过表格的方式进行排版，有不错的应对。jQuery Mobile的分栏格式通常来说具有两类标记嵌套而成，
Ui-grid-a，表示每栏宽度为移动设备屏幕的50%（一栏的标记）
Ui-block-a，表示栏目所处的顺序。（这里会常常用来换行，栏里面块的标记）
下面是一个简单的例子：（这里面有那么一部分注释的代码我没有删去，我考虑到读者会在看代码时知道我的思路，不知道这样是否可以有，希望大家给出意见！谢谢！）
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <meta name="viewpoint" content="user-scalable=no,initial-scale=1, | |
| maximum-scale=1,minimum-scale=1,width=device-width,height=device-height | |
| "> | |
| <!--<meta name="format-detection" content="telephone=no">--> | |
|
<style type="text/css"> |
| </style> | |
| 在这里我是用的jquery.mobile-1.4.0-beta.1.css，这还是一个公测版本。但是其中还是有一些喜欢的样式，所以，就相中它了！ | |
| <link rel="stylesheet" href="jquery.mobile-1.4.0-beta.1.css"/> | |
| <!--<link rel="stylesheet" href="H.css"/>--> | |
| <!--<link rel="stylesheet" href="LHL.css"/>--> | |
| <!--<link rel="stylesheet" href="LHL-A.css"/>--> | |
| <!--<link rel="stylesheet" href="LHL-C.css"/>--> | |
| <!--<link rel="stylesheet" href="LHL-D.css"/>--> | |
| <!--<link rel="stylesheet" href="LHL-E.css"/>--> | |
| <!--<link rel="stylesheet" href="jquery.mobile-1.3.2.css"/>--> | |
| <!--<link rel="stylesheet" href="H.css"/>--> | |
| <script type="text/javascript" src="jquery.js"></script> | |
| <!--<script type="text/javascript" src="jquery.mobile-1.3.2.js"></script>--> | |
| <script type="text/javascript" src="jquery.mobile-1.4.0-beta.1.js"></script> | |
|
这里是引入了一个ui的样式的封装文件，点击下载：http://ishare.iask.sina.com.cn/f/37768864.html |
|
| <script type="text/javascript" src="jquery-ui-1.10.3.custom.js.js"></script> | |
| </head> | |
| <body style="width: 300px"> |
| <section data-role="pageTwo" data-theme="a"> | |
| <div data-role ="header" data-theme ="b"> | |
| <h1> ControlGroup</h1> | |
| </div> | |
| <div class ="content" data-role ="content"> | |
| <!--<h2>一 栏</h2>--> | |
| <div class ="ui-grid-a"> | |
| <div class ="ui-block-a"> | |
| <div class ="ui-grid-a"> | |
| <div class ="ui-block-a"> | |
| <p id="four" style="height: 71px ;"> four</p> | |
| </div> | |
| <div class ="ui-block-b"> | |
| <p id="one" style="height: 71px ;"> one</p> | |
| </div> | |
| <div class ="ui-block-a"> | |
| <p id="two" style="height: 70px;"> two</p> | |
| </div> | |
| <div class ="ui-block-b"> | |
| <p id="three" style="height: 70px ;"> three</p> | |
| </div> | |
| </div> <!--<p id="oneOne">oneOne</p>--> | |
| </div> | |
| <div class ="ui-block-b"> | |
| <p id="oneTwo"> oneTwo</p> | |
| </div> | |
| <div class ="ui-block-a"> | |
| <p id="twoOne"> twoOne</p> | |
| </div> | |
| <div class ="ui-block-b"> | |
| <p id="twoTwo"> twoTwo</p> | |
| </div> | |
| <div class ="ui-block-a"> | |
| <p id="threeOne"> threeOne</p> | |
| </div> | |
| <div class ="ui-block-b"> | |
| <div class ="ui-grid-a"> | |
| <div class ="ui-block-a"> | |
| <p id="o" style="height: 71px ;"> four</p> | |
| </div> | |
| <div class ="ui-block-b"> | |
| <p id="t" style="height: 71px ;"> one</p> | |
| </div> | |
| <div class ="ui-block-a"> | |
| <p id="tt" style="height: 70px;"> two</p> | |
| </div> | |
| <div class ="ui-block-b"> | |
| <p id="f" style="height: 70px ;"> three</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class ="ui-block-a"> | |
| <p id="fourOne" > fourOne</p> | |
| </div> | |
| <div class ="ui-block-b"> | |
| <p id="fourTwo" > fourTwo</p> | |
| </div> | |
| <div class ="ui-block-a"> | |
| <p id="fiveOne" > <input type="button" data-icon="check" value="SURE" data-theme="b"></p> | |
| </div> | |
| <div class ="ui-block-b"> | |
| <p id="fiveTwo" > <input type="button" data-icon="delete"value=" EXIT" data-theme="b"></p> | |
| </div> | |
|
</div> </div> </div> |
| </div> | |
| <!--<div data-role ="footer" data-theme ="b">HongA+</div >--> | |
| </section> | |
| </body> | |
| </html> |
生成的界面：
下面还有两个按钮，我就没有截下来。