最近在忙着画原型图，学习的时间就更少了，但是可以尝试下提高效率。
前几天，师姐让我做一个可以伸缩的侧边栏，当时觉得这不就是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~
时间： 2024-07-28 15:39:10