easyui 搭建页面-CSDN博客

本文链接：https://blog.csdn.net/zys_1997/article/details/70920472

上文已经将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文件同一个目录下。添加代码后结果如下：