<!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>
效果图如下：
相关推荐
这个“EasyUi布局示例”是专为初学者设计的，旨在帮助他们快速理解和掌握EasyUi的布局机制，从而能够构建出美观且功能齐全的网页应用。 在前端开发中，布局是至关重要的部分，它决定了网页元素如何在不同屏幕尺寸和...
这个压缩包文件"qbldmonitor"可能包含了一个使用 jQuery EasyUI 实现的监控系统或者管理界面的示例。 jQuery EasyUI 的核心理念是简化网页开发，通过预定义的 CSS 样式和 JavaScript 插件，开发者可以快速实现诸如...
《jQuery EasyUI官方示例与API文档中文版详解》 jQuery EasyUI是一个基于jQuery的UI框架，它提供了丰富的组件和方便的API，使得开发者能够快速构建功能强大的Web应用。在这个"jquery-easyui-1.5.4.5"版本中，包含了...
这个压缩包包含的是 jQuery EasyUI 的全套文件，包括 jQuery 库本身以及一系列的示例（demo），解压后可以直接在项目中使用。 jQuery 是一个轻量级的 JavaScript 库，它简化了 JavaScript 的 DOM 操作、事件处理、...
《jQuery EasyUI 1.5 完整源码解析与应用》 jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了丰富的用户界面组件，如表格、对话框、菜单、按钮等，大大简化了Web应用程序的开发。在"jquery-easyui-1.5完整...
9. **文档和示例**：jQuery EasyUI 提供详尽的API文档和示例代码，有助于开发者快速学习和掌握使用方法。 10. **社区和更新**：jQuery EasyUI 有一个活跃的开发者社区，不断有新的插件和改进被贡献出来，而1.3.6...
**基于JQueryEasyUI类库的WebForm控件库** JQueryEasyUI是一个基于jQuery的UI框架，它封装了一系列的JavaScript组件，使得开发者能够轻松创建出功能丰富的Web应用程序界面。这个WebForm控件库是专门为.NET平台设计...
`jquery+easyui_api培训文档.doc` 是一份培训文档，可能包含了使用 jQuery EasyUI 进行开发的实践指导和示例代码，对于初学者来说非常有用。这份文档可能涵盖了创建基本的页面结构、使用各种组件（如对话框、表单、...
《jQuery EasyUI中文手册》是针对JavaScript库jQuery EasyUI的一款详尽指南，旨在帮助开发者更好地理解和运用这个强大的前端框架。jQuery EasyUI基于jQuery，提供了一系列轻量级、易用的UI组件，使得开发者能够快速...
在讲义中，你将学习到jQuery EasyUI的基础概念，包括如何引入库文件，以及如何创建基本的布局和组件。jQuery EasyUI提供了许多预定义的组件，如面板（Panel）、表单（Form）、菜单（Menu）、对话框（Dialog）等，...
这个"jquery easyui demo"压缩包包含了版本为1.5.3的jQuery EasyUI 示例，旨在让学习者快速理解和掌握其用法。 jQuery EasyUI 的核心理念是简化网页开发，它封装了许多常见的UI元素，如对话框、表格、菜单、按钮、...
本教程“jQueryEasyUI从零开始学源码part1”旨在帮助初学者深入理解jQuery EasyUI的工作原理，通过源码分析来提升开发技能。 首先，我们需要了解jQuery EasyUI的基础概念。jQuery是一个轻量级的JavaScript库，简化...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，用于快速构建用户界面。1.4.2 版本是这个框架的一个稳定版本，包含了许多改进和修复，以提升开发者的体验和应用程序的性能。这个压缩包...
在jQuery EasyUI 1.4.5的API中文版中，每个组件都有详细的使用方法和示例，包括如何初始化、配置选项、调用方法以及响应事件。例如，`datagrid`组件的API会讲解如何设置列宽、定义数据源、实现行操作等。 此外，...
- **实例**：jQuery EasyUI 提供了大量的示例代码，帮助开发者了解如何使用各个组件，如对话框（dialog）、表格（datagrid）、树形控件（tree）、下拉菜单（combobox）等。 ### 2. 主要组件介绍 #### 2.1 数据网格...
6. **主题定制**：jQuery EasyUI 提供多种预设主题，也可以根据项目需求自定义主题，改变组件的颜色、样式和布局。 7. **性能优化**：理解如何最小化JavaScript和CSS，以及如何合理组织和调用组件，以提高页面加载...
**jQueryEasyUI 1.1 完整源代码详解** jQueryEasyUI 是一款基于 jQuery 的前端框架，它为开发者提供了一系列轻量级、易于使用的组件，用于快速构建用户界面。这个1.1版本包含了完整的源代码，允许开发者深入理解其...
对于开发者而言，API文档是学习和理解框架功能的关键工具，它可以提供详尽的函数介绍、参数说明以及使用示例，帮助开发者高效地掌握jQuery EasyUI的使用方法。 jQuery EasyUI 的核心知识点包括： 1. **组件库**：...
这个“jQuery EasyUI 1.4.3奇葩案例代码”是一个特别的示例集合，旨在展示一些不常见的或独特的应用场景，帮助开发者更好地理解和应用EasyUI。 ### 1. jQuery EasyUI 的核心概念 - **jQuery基础**：EasyUI是建立在...
在本文中，我们将深入探讨jQueryEasyUI的核心概念、主要组件以及与Java的集成方式。 一、jQueryEasyUI的核心概念 1. **组件化**：jQueryEasyUI将常见的用户界面元素如表格、对话框、菜单、按钮等封装为独立的组件...