EasyUi[01]入门

最新推荐文章于 2024-10-27 00:24:16 发布

对太阳心动

最新推荐文章于 2024-10-27 00:24:16 发布

阅读量101

点赞数 2

文章标签： easyui jquery 前端

本文链接：https://blog.csdn.net/weixin_62026595/article/details/124573381

版权

博客探讨了在前端框架选择中，为何即便EasyUI的界面效果逊色于Bootstrap和Layui，但因其文档完整性、稳定性和组件丰富性，仍然成为一些公司的首选。文章介绍了如何在Eclipse中搭建EasyUI环境，并提供了简单的布局示例。考虑到成本、后端技术团队的前端技能以及社区活跃度，公司可能会倾向于选择EasyUI。

摘要由CSDN通过智能技术生成

‘闲’聊：

ui框架
easyui=jquery+html4（用来做后台的管理界面）

我们为什么要学习easyui
从效果来看easyui的界面效果要远远差于bootstrap
   跟layui比，界面效果也更差

从金钱的角度上，开发首先会排除掉bootstrap
从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要
优于layui

从公司的角度考虑选用那个框架
成本、公司的后端技术人员前端功底、前端的社区活跃度。

这就是简单或许又粗暴的讲述。

应用：

1.在eclipse 中新建 Web 项目

2.在WebContent 下 建立 static 包

3.在 static 下建 js, images,css 等文件夹

4.在 js 下把 jquery-easyui-1.5.1（已有的文件夹）复制在其下。

5.创建 index.jsp 界面

6.从 jQuery EasyUI 官方API文档中文版把路径复制过来，再改路径。

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

假设找 icon.css shift+ctrl+r 就可以找到然后复制文件名：Copy Qualified Name

粘贴就可以了。再把前面的改成：${pageContext.request.contextPath }

改完之后为：

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">

index.jsp界面 layout 布局示例：

jQuery EasyUI 官方API文档中文版有代码，把其粘过来就可以了。(body 内的代码)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
</head>
<body>
	    
    
    <div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;">
    </div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;">
   
    </div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;">
    
    
    <ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>   
</ul>  

    
    
    </div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</div>  
    
 
	
</body>
</html>

图片：