EasyUI-Layout
这是第一篇记录我学习我EasyUI的文章，为了就是记录我从一个菜鸟进阶的过程。
Start
我首先要明白，这个Layout是用来干嘛的。 Layout翻译为中文的意思是布局，他的作用是规划web页面的元素的布局，用白话说，就是用Layout来规定页面中每一类元素在页面中显示的位置。Layout将会对页面进行分割，然后在每个分割后的区域里面填入对应的内容即可。
那么如何才能使用这个布局功能呢？
1：引入EasyUI框架
参考代码如下所示：
<!--EasyUI-->
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../jquery-easyui-1.3.5/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
2：开始规划页面布局，这里我们先从一个简单的Demo入手
先看下效果图
这里我们将页面分割为两个部分，左边以及右边。 说到这里，我们有一点需要说明，既然使用到了Layout这个功能，也就说明，要将指定的区域最少分割为2个部分，比如：左右或者上下，上图中的Demo效果图就是将一个区域分割为左右两个部分.
代码如下：
<div class="easyui-layout" fit="true">
<div region="west" style="200px;" title="xingchen " split="true"></div>4
<div region="center" border="true" title="center-1"></div>
</div>
可以看出，如果想要进行Layout布局，我们首先要找到需要进行布局的容器，这里我们通常会将Div元素指定为一个容器，指定的方法是 设置它的Class="easyui-layout"，并且这个写法是强制性的，也就说如果你想使用layout这个功能，那么就得这么写。但是仅仅写到这里还是没有任何分割效果的哦。
<div class="easyui-layout" fit="true">
</div>
也就说，我们仅仅指定容器还是没有任何的效果的哦，我们还必须分割容器，
<div class="easyui-layout" fit="true">
<div region="west" style="200px;" title="xingchen " split="true"></div>4
<div region="center" border="true" title="center-1"></div>
</div>
修改代码如上所示，运行后的效果就是第一张效果图。
这里有一个重要的参数：region ,他的值有如下几种枚举值：north,east,west,center。
north表示容器的顶部部分
west表示容器的左边
east表示容器的右边
south表示容器的底部
center表示容器的中间部分，这个属性有点特殊，在使用Layout的时候，最少得有连个子区域，其中一个Div的region就必须为center
title参数给这个区域添加一个标题，如果有title的参数，对应的DIV就会有一个标题区域.
对于设置为 west 以及east的时候，如果你设置title,那么就会一个展开、收缩的按钮，但是对于region="center"的Div，即使设置了title，title蓝的左边活着右边边框都不会有展开、收缩的按钮，这点也是一个特殊的地方。
split="true" 该属性表示两个相邻的Div之间时候有一个间隔条带，如果 split="false"那么两个相邻的Layout的Div之间基本就是相邻的，最多看到一个1px的分割线而已。
即使你想对页面进行负责的分割，你只要按照上面的分割规格并设置对应的参数，就可以得到相对比较复杂的页面布局。
我们使用EasyUI框架，不仅仅可以设置静态的页面布局，我们还可以动态的创建以及删除Layout
>添加布局，参考代码如下所示：
<script type="text/javascript">
function addPanel()
{
var region = $('#region').val();
var options =
{
region: region //定义region的值 south/north/west/east/center等选项
};
if (region == 'north' || region == 'south')
{
options.height = 50;
} else
{
options.width = 100;
options.split = true;//是否显示分割带
options.title = $('#region option:selected').text();
}
$('#cc').layout('add', options);//向指定的Layout容器内添加动态创建的子布局
function removePanel() {
$('#cc').layout('remove', $('#region').val());//删除指定布局容器的子布局
}
}
</script>
Jason