最近在忙着画原型图，学习的时间就更少了，但是可以尝试下提高效率。
前几天，师姐让我做一个可以伸缩的侧边栏，当时觉得这不就是JS里面的那个Demo么，然后就去改原型图了，之后学了一点儿EasyUI,打开师姐给我的代码后，发现他们的页面是用EasyUI做的布局，这就比单纯的JS简单多了，以前要一大段代码，现在只需两行，搞定一个向上的侧边栏。
效果如下：
之后，又找了个完整页面布局的Demo敲了下，感觉EasyUI真的好简单，又好用。下面给出Layout的全部代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>layout</title>
<script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset="utf-8"></script> <!--(指定编码方式，防止出现乱码)引入EasyUI中使用的Jquery版本-->
<!--<script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/easyloader.js"></script> -->
<script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/jquery.easyui.min.js" charset="utf-8"></script> <!--(指定编码方式，防止出现乱码)引入EasyUi文件-->
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.2.6/themes/default/easyui.css"> <!--引入CSS样式-->
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.2.6/themes/icon.css"> <!--Icon引入-->
<script language="JavaScript" type="text/javascript" src="../jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script> <!--汉化-->
</head>
<body class="easyui-layout"> <!--注意，此处一定要指定class,之后parser加载器才会自动解析页面-->
<!--一些属性注释-->
<!--region属性用来指定布局面板的位置（方向），可以取下列值的其中之一：north, south, east, west, center。-->
<!--split:如果设置为true将显示一个分隔条，用户可以拖动分隔条来改变布局面板的尺寸。-->
<!--collapsed:默认显示时是否折叠-->
<div region="north" split="true" title="这是一个布局示例" border="false" style="height:60px;background:#B3DFDA;padding:10px">北侧布局</div> <!--北侧栏-->
<div region="west" split="true" title="West" style="width:150px;padding:10px;">西侧布局</div> <!--西侧布局-->
<div region="east" split="true" collapsed="true" title="East" style="width:100px;padding:10px;">东侧布局</div> <!--东侧布局-->
<div region="south" split="true" border="false" style="height:50px;background:#A9FACD;padding:10px;">南侧布局</div> <!--南侧布局-->
<div region="center" title="中间布局示例"> <!--中间布局-->
</div>
</body>
</html>
布局完成之后，效果如下：
在实际应用中，我们的页面当然不是这么简单的啦，但是don‘t worry,整体布局有了，我们还可以复用很多元件：
看到这些，是不是感觉自己像贾琳师哥说的那样，终于进入了”青铜时代“~~~~
在这个阶段，我们只需学会复用就行，等哪天这些框架不能再满足你的要求时，go and make one~
原文地址：http://blog.csdn.net/lhc1105/article/details/41171349
