|
jquerymobile 一個(gè)簡(jiǎn)單的九宮格實(shí)現(xiàn)（Gallery） jquerymobile實(shí)現(xiàn)一個(gè)簡(jiǎn)單的九宮格代碼如下： 效果如下：
index.html頁(yè)面代碼如下： <!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>業(yè)務(wù)管理</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>資產(chǎn)屬性</h3> </a> </li> <li class="gallery-item"> <a href="#"><img src="images/4.png"/> <h3>資產(chǎn)狀態(tài)</h3> </a> </li> <li class="gallery-item"> <a href="#"><img src="images/5.png"/> <h3>資產(chǎn)看板</h3> </a> </li> <li class="gallery-item"> <a href="#"><img src="images/6.png"/> <h3>故障上報(bào)</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>采購(gòu)申請(qǐng)</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;
}
|
|
|
