jquery easyui 布局示例

最新推荐文章于 2025-05-29 16:56:25 发布

原创最新推荐文章于 2025-05-29 16:56:25 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

技术简介专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个使用jQuery EasyUI框架实现的布局示例，通过选择不同的区域选项可以隐藏或显示对应的布局部分，包括north、south、east和west等方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Border Layout space - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<script type="text/javascript" src="../../jquery-1.7.2.min.js"></script>	
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.extend.js"></script>
	<script>
		function hidden(){
			var region = $("#cc1").combobox('getValue');
			if(region=="all"){
				$('#subLayout').layout('hidden','north');
				$('#subLayout').layout('hidden','east');
				$('#subLayout').layout('hidden','south');
				$('#subLayout').layout('hidden','west');
			}else{
				$('#subLayout').layout('hidden',region);
			}		
		}
		function show(){
			var region = $("#cc2").combobox('getValue');
			if(region=="all"){
				$('#subLayout').layout('show','north');
				$('#subLayout').layout('show','east');
				$('#subLayout').layout('show','south');
				$('#subLayout').layout('show','west');
			}else{
				$('#subLayout').layout('show',region);
			}
		}
		$(function(){
			/*
			var p = $('body').layout('panel','west').panel({
				onCollapse:function(){
					alert('collapse');
				}
			});
			
			setTimeout(function(){
				$('body').layout('collapse','east');
			},0);
			*/
		});
	</script>
</head>
<body class="easyui-layout">
	<div region="north" title="north" border="true" split="true" style="height:70px;padding:5px;">
		<select id="cc1" class="easyui-combobox" name="state" style="width:100px;">
			<option value="west">west</option>
			<option value="east">east</option>
			<option value="north">north</option>
			<option value="south">south</option>
			<option value="all">all</option>
		</select>
		<a href="#" class="easyui-linkbutton" plain="false" style="margin-right:100px;" onClick="javascript:hidden()">隐藏:</a>
		<select id="cc2" class="easyui-combobox" name="state" style="width:100px;">
			<option value="west">west</option>
			<option value="east">east</option>
			<option value="north">north</option>
			<option value="south">south</option>
			<option value="all">all</option>
		</select>
		<a href="#" class="easyui-linkbutton" plain="false" onClick="javascript:show()">显示:</a>
	</div>
	<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
	<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
	<div region="south" border="true" split="true" title="south" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div region="center"  border="false" split="true">
		<div class="easyui-layout" fit="true" id="subLayout">
			<div region="north" title="north" border="true" split="true" style="height:100px;background:#B3DFDA;padding:10px">
			</div>
			<div region="west" split="true" title="sub West" style="width:150px;padding:10px;">sub west content</div>
			<div region="east" split="true" title="sub East" style="width:100px;padding:10px;">sub east region</div>
			<div region="south" border="true" split="true" title="sub south" style="height:100px;background:#A9FACD;padding:10px;">sub south region</div>
			<div region="center" title="sub Main  Title" border="true" split="true">
		</div>
	</div>
</body>
</html>

效果图如下：