Jquery moblie中的分栏布局

大家好，很高兴又与大家见面了，今天我要给大家展示的是自己对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>

生成的界面：

下面还有两个按钮，我就没有截下来。

posted @ 2013-11-30 01:26 Catherine_Brain 阅读(587) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Personal Site Name

yourname personal portfolio

Some words about me

What I do?

Contact me?

Catherine_Brain

Stay hungry,stay foolish!

Jquery moblie中的分栏布局

公告