jquery的layout简易示范 _Web前端

jquery的layout简易示例

JQuery Layout Demo

下载jquery 、jquery-ui 、jquery.layout

以下Demo可以展示上中下、左中右格局的样式

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

	<title>Layout Container</title>

	<link type="text/css" rel="stylesheet" href="layout-default-latest.css" />
	<style type="text/css">
	html, body {
		background:	#666;
		width:		100%;
		height:		100%;					
		padding:	0;
		margin:		0;
		overflow:	auto; /* when page gets too small */
	}
	#container {
		background:	#999;
		height:		100%;
		margin:		0 auto;
		width:		100%;
		max-width:	900px;
		min-width:	700px;
		_width:		700px; /* min-width for IE6 */
	}
	.pane {
		display:	none; /* will appear when layout inits */
	}
	</style>

	<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="jquery-ui.min.js"></script>
	<script type="text/javascript" src="jquery.layout.js"></script>
	<script type="text/javascript">

	$(document).ready(function () {
		$('#container').layout();
	});

	</script>

</head>
<body>
<div id="container">
	<div class="pane ui-layout-center">
		Center
		<p><a href="http://layout.jquery-dev.net/demos.html"><b>Go to the Demos page</b></a></p>
	</div>
	<div class="pane ui-layout-north">North</div>
	<div class="pane ui-layout-south">South</div>
	<div class="pane ui-layout-east">East</div>
	<div class="pane ui-layout-west">West</div>
</div>
</body>
</html>