jquery的layout简易示例

最新推荐文章于 2024-04-08 13:00:00 发布

iteye_21270

最新推荐文章于 2024-04-08 13:00:00 发布

阅读量458

点赞数

分类专栏： jquery 文章标签： jquery layout ViewUI

本文链接：https://blog.csdn.net/iteye_21270/article/details/82167483

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

iteye_21270

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的layout简易示例

JQuery Layout Demo 下载jquery、jquery-ui、jquery.layout 以下Demo可以展示上中下、左中右格局的样式 demo.html&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht...
复制链接

扫一扫