我们继续讲解jquery操作事件中，js手机版里面表格的使用，和制作一个两栏页面效果。
1.定义网格
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css">
/*自定义CSS,用以标识两栏布局边框范国*/
.ui-content div div p{
background-color:#fff;
border: 1px solid #93FB40;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>三行三列表格布局</h1>
</div>
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a"><p>1行1栏</p></div>
<div class="ui-block-b"><p>1行2栏</p></div>
<div class="ui-block-c"><p>1行3栏</p></div>
<div class="ui-block-a"><p>2行1栏</p></div>
<div class="ui-block-b"><p>2行2栏</p></div>
<div class="ui-block-c"><p>2行3栏</p></div>
<div class="ui-block-a"><p>3行1栏</p></div>
<div class="ui-block-b"><p>3行2栏</p></div>
<div class="ui-block-c"><p>3行3栏</p></div>
</div>
</div>
</div>
</body>
</html>
2.设计两栏页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css">
.ui-grid-a img { width: 100%; }
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>网格化布局</h1>
</div>
<div class="ui-grid-a">
<div class="ui-block-a"> <img src="//freemuban.com/js/511/2.png" alt=""/> </div>
<div class="ui-block-b"> <img src="//freemuban.com/js/511/4.png" alt=""/> </div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a"> <img src="//freemuban.com/js/511/1.png" alt=""/> </div>
<div class="ui-block-b"> <img src="//freemuban.com/js/511/3.png" alt=""/> </div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a"> <img src="//freemuban.com/js/511/6.png" alt=""/> </div>
<div class="ui-block-b"> <img src="//freemuban.com/js/511/8.png" alt=""/> </div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a"> <img src="//freemuban.com/js/511/5.png" alt=""/> </div>
<div class="ui-block-b"> <img src="//freemuban.com/js/511/7.png" alt=""/> </div>
</div>
</div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css">
.ui-grid-a img { width: 100%; }
</style>
</head>
<body>
<div data-role="page">
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-a">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-a">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-a">C</div>
</div>
</div>
<div class="ui-grid-c">
<div class="ui-block-a">
<div class="ui-bar ui-bar-b">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-b">C</div>
</div>
<div class="ui-block-d">
<div class="ui-bar ui-bar-b">D</div>
</div>
</div>
<div class="ui-grid-d">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c">C</div>
</div>
<div class="ui-block-d">
<div class="ui-bar ui-bar-c">D</div>
</div>
<div class="ui-block-e">
<div class="ui-bar ui-bar-c">E</div>
</div>
</div>
</div>
</body>
</html>
