您的位置：首页 > Web前端 > JQuery

jquery mobile学习笔记——网格布局

2014-05-03 22:45 465 查看
作者：无、为（博客园）

3.4　内容格式化

jQuery Mobile中提供了许多非常有用的工具与组件，如多列的网格布局、折叠形的面板控制等，这些组件可以帮助开发者快速实现正文区域内容的格式化。

3.4.1　网格布局

jQuery Mobile提供的CSS样式“ui-grid”可以实现内容的网格布局。该样式有4种预设的配置布局：“ui-grid-a”、“ui-grid- b”、“ui-grid-c”、“ui-grid-d”，分别对应两列、三列、四列、五列的网格布局形式，可以最大范围满足页面多列的需求。

使用网格布局时，整个宽度为100%，无任何“padding”和“margin”及背景色，因此不会影响到其他元素放入网格中的位置。

实例3-12　在内容区域添加多种类型的网格布局

1. 功能说明

新建一个HTML 页面，在内容区域中添加4种预设的网格布局，并且通过不同的主题颜色进行区分，以分块的形式显示在页面中。

2. 实现代码

新建一个HTML页面3-12.htm，加入代码如代码清单3-12所示。

代码清单 3-12　在内容区域添加多种类型的网格布局

<!DOCTYPE html>

<html>

<head>

<title>jQuery Mobile 网格布局</title>

<meta name="viewport" content="width=device-width,

initial-scale=1" />

<link href="Css/jquery.mobile-1.0.1.min.css"

rel="Stylesheet" type="text/css" />

<link href="Css/css3.css"

rel="Stylesheet" type="text/css" />

<script src="Js/jquery-1.6.4.js"

type="text/javascript"></script>

<script src="Js/jquery.mobile-1.0.1.js"

type="text/javascript"></script>

</head>

<body>

<div data-role="page">

<div data-role="header"><h1>头部栏标题</h1></div>

<div class="ui-grid-a">

<div class="ui-block-a">

<div class="ui-bar ui-bar-b h60">A</div>

</div>

<div class="ui-block-b">

<div class="ui-bar ui-bar-b h60">B</div>

</div>

</div>

<div class="ui-grid-b">

<div class="ui-block-a">

<div class="ui-bar ui-bar-c h60">A</div>

</div>

<div class="ui-block-b">

<div class="ui-bar ui-bar-c h60">B</div>

</div>

<div class="ui-block-c">

<div class="ui-bar ui-bar-c h60">C</div>

</div>

</div>

<div class="ui-grid-c">

<div class="ui-block-a">

<div class="ui-bar ui-bar-d h60">A</div>

</div>

<div class="ui-block-b">

<div class="ui-bar ui-bar-d h60">B</div>

</div>

<div class="ui-block-c">

<div class="ui-bar ui-bar-d h60">C</div>

</div>

<div class="ui-block-d">

<div class="ui-bar ui-bar-d h60">D</div>

</div>

</div>

<div class="ui-grid-d">

<div class="ui-block-a">

<div class="ui-bar ui-bar-e h60">A</div>

</div>

<div class="ui-block-b">

<div class="ui-bar ui-bar-e h60">B</div>

</div>

<div class="ui-block-c">

<div class="ui-bar ui-bar-e h60">C</div>

</div>

<div class="ui-block-d">

<div class="ui-bar ui-bar-e h60">D</div>

</div>

<div class="ui-block-e">

<div class="ui-bar ui-bar-e h60">E</div>

</div>

</div>

　　<div data-role="footer"><h4>2012 rttop.cn studio</h4></div>

　</div>

</body>

</html>

3. 页面效果

该页面在Opera Mobile Emulator 12.0下执行的效果如图3-12所示。





4. 源码分析

在本实例的代码中，要增加一个多列的网格区域，首先通过<div>元素构建一个容器，如果是两列，则给该容器添加的“class”属性值为“ui-grid-a”；三列则为“ui-grid-b”，依此类推。

然后，在已构建的容器中添加子容器，如果是两列，则给两个子容器分别添加“ui-block-a”、“ui-block-b”样式属性；如果是三 列，则给三个子容器分别添加“ui-block-a”、“ui-block-b”、“ui-block-c”样式属性；其他多列依此类推。

最后，在子容器中放置需要显示的内容。在本实例中，每个子容器都分别放置了一个<div>元素，代码如下所示：

<div class="ui-bar ui-bar-b h60">A</div>

在上述代码中，<div>元素通过“class”属性添加了三个样式。第一个和第二个都是jQuery Mobile自带的样式，“ui-bar”用于控制各子容器的间距，“ui-bar-b”用于设置各子容器的主题样式。第三个样式“h60”为自定义样 式，将子容器的高度设置为“60px”。

说明　如果容器选择的样式为两列即“class”值为“ui-grid-a”，而在它的子容器中添加了三个子项即“class”值为“ui-block-c”，那么该列自动被放置在下一行。

下面是个人使用网格布局实现的页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>广电医疗平台</title>
		<link rel='stylesheet' href='jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css'/>
		<script type='text/javascript' src='js/jquery-1.7.min.js'></script>
		<script type='text/javascript' src='jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js'></script>
		<link rel ="stylesheet" href="css/public.css"/>
		
		
</head>
<body>
<div data-role="page" class='home'>
    <div data-role='header' data-theme="t">
		<h1>广电医疗平台</h1>
		  <div class="ui-btn-right">
			
		</div> 
    </div>
    
    <div data-role='content'>
		<div class="ui-grid-a" style="margin-top:10px;">
			 <div class="ui-block-a">
				<center>
					<div class="imgDiv">
						<a href="butUi.html" data-transition="filp">
							<img src="img/hs1.jpg" alt="医院" />
						</a>
						<span>按医院预约</span>
					</div>
				</center>	
			 </div>
			 <div class="ui-block-b">
				<center>	
					<div class="imgDiv">
						<a href="butUi.html" data-transition="filp">
							<img src="img/ks1.jpg" alt="科室" />
						</a>
						<span>按科室预约</span>
					</div>
				</center>	
			 </div>
		</div>
		<div class="ui-grid-a">
			 <div class="ui-block-a">
				<center>
					<div class="imgDiv">
						<a href="butUi.html" data-transition="filp">
							<img src="img/doc1.jpg" alt="医院" />
						</a>
						<span>按医生预约</span>
					</div>
				</center>
			 </div>
			 <div class="ui-block-b">
				<center>
					<div class="imgDiv">
						<a href="butUi.html" data-transition="filp">
							<img src="img/yy1.jpg" alt="医院" />
						</a>
						<span>预约复诊</span>
					</div>
				</center>	
			 </div>
		</div>
		<div class="ui-grid-a">
			 <div class="ui-block-a">
				<center>
					<a href="butUi.html" data-transition="filp">
						<img src="img/login.jpg" alt="登陆" style="height:45px;"/>
					</a>
				</center>
			 </div>
			 <div class="ui-block-b">
				<center>
					<a href="butUi.html" data-transition="filp">
						<img src="img/regist.jpg" alt="注册" style="height:45px;"/>
					</a>
				</center>	
			 </div>
		</div>
    </div>
	<style type="text/css">
		.home{
			background-image:url(img/apic324.jpg);
			box-shadow:  0px 0px 30px 5px rgba(107, 105, 105, 0.3) inset,
				0px 0px 0px 1px rgba(107, 105, 105, 0.4) inset;
		}
		.ui-bar-t {
			padding: 5px 0px;
			background-image:url(img/apic324.jpg);
			color: #fff;
			font-family:Georgia;
			font-size:16px;
		}
		img{
			width:120px;
			height:120px;
			margin:8px;
			
		}
		.imgDiv{
			border:1px solid #ccc;
			width:140px;
			height:160px;
			background:#fff;
			font-size:18px;
			font-weight:bold;
			font-family:新宋体;
		}
	</style>
		
</div>

</body>
</html>


效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航