jquerymobile 一个简单的九宫格实现（Gallery）

longgangbai

浏览: 7325417 次
性别:
来自: 上海

最近访客更多访客>>

sdcharles

paladin1988

ljq867

yuxiangtong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquerymobile实现一个简单的九宫格代码如下：

效果如下：

index.html页面代码如下：

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Examples - JQM Gallery </title>
	<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.1.min.css" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script src="jquery.mobile/jquery-1.6.4.min"></script>
	<script src="jquery.mobile/jquery.mobile-1.0.1.min.js"></script>
	</head>
<body>  
<div data-role="page" data-theme="a" id="jqm-home">
		<div data-role="header">
			<h1>业务管理</h1> 
		</div>
		<div data-role="content" data-theme="b">
			<section class="gallery">
			    <ul class="gallery-entries clearfix">	
						<li class="gallery-item">
							<a href="#"><img src="images/shoppingcart.png"/>
							<h3>故障管理</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/2.png"/>
							<h3>工单管理</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/3.png"/>
							<h3>资产属性</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/4.png"/>
							<h3>资产状态</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/5.png"/>
							<h3>资产看板</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/6.png"/>
							<h3>故障上报</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/7.png"/>
							<h3>备品备件</h3>
							</a>
						</li>
						<li class="gallery-item">
							<a href="#"><img src="images/8.png"/>
							<h3>采购申请</h3>
							</a>
						</li>
			</ul>
	</div>
</div>
</body>
</html>

css样式代码如下：

.clearfix:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
}
.gallery{
	float: left;
	width:100%;
}


.gallery-entries{ 
	list-style:none;
	padding:0;
	float: left;
}
.gallery-entries .gallery-item{
	float: left;
	margin-right:1%;
	margin-bottom:2%;
}
.gallery-entries .gallery-item img{
	-webkit-box-shadow: #999 0 3px 5px;
	-moz-box-shadow: #999 0 3px 5px;
	box-shadow: #999 0 3px 5px;
	border: 1px solid #fff;
	max-width:100%;
	width: 80px;
	height: 80px;
}


.gallery-entries .gallery-item a{
	font-weight:normal;
	text-decoration:none;
}

.gallery-entries .gallery-item a h3{
	width:80px;
	white-space:nowrap;
	font-size:1em;
	overflow: hidden;
	text-overflow:ellipsis;
	padding-top:3px;
	align:center;
}

.gallery-entries .gallery-item  a:hover h3, .gallery-entries .gallery-item  a:active h3{
	text-decoration:underline;
}

分享到：

【转】移动电子商务的现状与问题 | 【转】淘宝数据魔方技术架构解析

2012-05-28 11:10
浏览 9286
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquerymobile 一个简单的九宫格实现（Gallery）

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquerymobile 一个简单的九宫格实现（Gallery）

评论

发表评论

相关推荐

phonegap contact API的使用

phonegap开发中必备的帮助文档android apk

jquerymobile 开发中几个样式问题

【转】JavaScript编程模式：模块的力量

【转】JavaScript闭包和模块模式

【转】PhoneGap域名白名单说明书（Domain Whitelist Guide）

phonegap拍照的获取图片和设置问题

Native+WebApp中Phonegap调用Android Activity

IOS Xcode4.3使用中几个问题

PhoneGap Xcode iOS入门教程

phonegap底层原理学习和研究(四)

phonegap底层原理学习和研究(三)

phonegap底层原理学习和研究(二)

【转】手机应用开发者需注意的20个事项

【转】8 个移动产品设计必备网站

HTML5 canvas实现电子签名

HTML5 的GEOLocation的API

phonegap底层原理学习和研究(一)

jquerymobile google地图插件jquery-ui-map

【转】JQuerymobile 官方 资源和插件

最近访客更多访客>>

【转】JQuerymobile 官方资源和插件