easyui 搭建页面

来源：互联网发布：淘宝个体营业执照办理编辑：程序博客网时间：2024/06/05 11:32

上文已经将SSH框架搭建成功，具体搭建的详细信息请点击SSH框架搭建。现在将在上文的基础上开始实现一个学生信息管理系统，首先我们用 easyui 来创建一个页面。用easyui 来创建页面需要先下载它的相关一些文件，这里已经打包了easyui 1.5.2的文件点击easyui1.5.2下载。

第一步：先在eclipse中创建一个jsp页面，引入jquery easyui 的js和css文件

<script src="../easyui1.5.2/jquery.min.js" type="text/javascript"></script><script src="../easyui1.5.2/jquery.easyui.min.js" type="text/javascript"></script><link href="../easyui1.5.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /><link href="../easyui1.5.2/themes/icon.css" rel="stylesheet" type="text/css" />

第二步：在html的body部分开始对页面进行“分块”，基本思路就是将一个页面划分为东、南、西、北、中五个方向，具体根据个人需求来决定，我这里将将页面划分为北，西，中，南四个方向，具体代码如下：

<body class="easyui-layout"  >       <div region="north" border="true" split="true" style="overflow: hidden; height: 80px;">          <table cellpadding=0 cellspacing=0 border=0 height=100% width=100%>              <tr height=35px>                <td width=50%><img src="../images/logo.gif" /></td>                <td width=50% align="right">  欢迎您：　 |  修改密码  |  退出系统  | 主页    </td>              </tr>          </table>       </div>               <div region="west" split="true" title="导航菜单" style="width: 200px;"></div>              <div id="mainPanle" region="center" style="overflow: hidden;">             <div class="easyui-tabs" fit="true" id="tt" border=false> </div>       </div>               <div  align="center" region="south" border="true" split="true" style="overflow: hidden; height: 30px;">            <div class="footer">版权所有@ 592813685@qq.com</div>       </div></body>

启动Tomcat，上述代码的运行结果如下图：

第二步：west区域添加一个easyui 可折叠面板，具体实现代码如下：

   <div region="west" split="true" title="导航菜单" style="width: 200px;">            <div id="aa" class="easyui-accordion" >                   <div title="标题1" data-options="iconCls:'icon-folder'" style="overflow:auto;padding:10px;"></div>                   <div title="标题2" data-options="iconCls:'icon-folder',selected:true" style="padding:10px;"></div>                   <div title="标题2" data-options="iconCls:'icon-folder',selected:true" style="padding:10px;"></div>           </div>   </div>

这里需要注意一点，在实现这一段代码之前，先打开导入的icon.css文件，在其中适当修改样式，本段代码中的icon-folder在icon.css中并没有，是作者自己添加的，另外还有导入themes文件夹下的icons文件到icon.css文件同一个目录下。添加代码后结果如下：

至此，页面的基本架构已经搭建出来了，之后将继续完善这个页面的目录，并实现一些相关的点击事件。

demo下载地址：easyui 搭建页面demo

0 0