把一个html平分成四块显示四个不同的网页

程序员文章站 2024-01-29 08:41:40

...

这个是完成后的效果

源码，用的是easyUI，需要导easyUI的框架包

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="js/easyui/themes/default/easyui.css" />
	<link rel="stylesheet" href="js/easyui/themes/icon.css" />
	<style type="text/css">
		html,
		body {
			width: 99.5%;
			height: 99%;
		}
		
		.div {
			width: 100%;
			height: 100%;
			display: flex;
			flex-flow: wrap;
		}
		
		.div div {
			width: 50%;
		}
	</style>

	<body>
		<div class="div">
			<div class="easyui-panel" title="页面1" data-options="href:'1.html',maximizable:true" id="panel1">
			</div>

			<div class="easyui-panel" title="页面2" data-options="href:'2.html',maximizable:true" id="panel2">
			</div>

			<div class="easyui-panel" title="页面3" data-options="href:'3.html',maximizable:true" id="panel3">
			</div>

			<div class="easyui-panel" title="页面4" data-options="href:'4.html',maximizable:true" id="panel4">
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#panel1").panel({
				onMaximize: function() {
					$("#panel2").panel("close");
					$("#panel3").panel("close");
					$("#panel4").panel("close");
				},

				onRestore: function() {
					$("#panel2").panel("open");
					$("#panel3").panel("open");
					$("#panel4").panel("open");
				},
			});

			$("#panel2").panel({
				onMaximize: function() {
					$("#panel1").panel("close");
					$("#panel3").panel("close");
					$("#panel4").panel("close");
				},

				onRestore: function() {
					$("#panel1").panel("open");
					$("#panel3").panel("open");
					$("#panel4").panel("open");
				},
			});

			$("#panel3").panel({
				onMaximize: function() {
					$("#panel2").panel("close");
					$("#panel1").panel("close");
					$("#panel4").panel("close");
				},

				onRestore: function() {
					$("#panel2").panel("open");
					$("#panel1").panel("open");
					$("#panel4").panel("open");
				},
			});

			$("#panel4").panel({
				onMaximize: function() {
					$("#panel2").panel("close");
					$("#panel3").panel("close");
					$("#panel1").panel("close");
				},

				onRestore: function() {
					$("#panel2").panel("open");
					$("#panel3").panel("open");
					$("#panel1").panel("open");
				},
			});
		});
	</script>

</html>

上一篇： quick cocos2dx学习记录

下一篇： phplot生成图片类用法详解