EasyUi入门

最新推荐文章于 2025-06-20 14:00:32 发布

原创最新推荐文章于 2025-06-20 14:00:32 发布 · 538 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #jquery

一、ui框架

1.easyui=jquery+html4（用来做后台的管理界面）

2.bootstrap=jQuery+html5

3.layui

二、为什么选择使用easyui

从效果来看，easyui比不上bootstrap那样美观

与layui相比，界面效果也更差

在这种情况下，我们为什么要使用相对较差的easyui呢，首先，使用bootstrap要钱，easyui比layui更加稳定，所以使用easyui，如果你有钱，那当我没说

easyui的优点：

1.easyUI节省了开发产品的时间和规模。

2.easyUI非常简单，但是功能非常强大

3.使用easyUI你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

当然最终还是从公司的角度考虑用哪个框架

考虑方面：成本，公司的后端技术人员前端功底、前端的社区活跃度

easyui是一款基于jQuery的前端框架，可以使用其中的组件进行布局以及用来做后台的管理界面。

下载easyui：Download EasyUI Package - jQuery,Angular,React,Vue

三、easyui的使用

1.将jquery-easyui-1.5.1文件解压后导入项目

文件长这样：

2.EasyUI的CSS和Javascript文件导入页面

<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>

js跟css的路径必须对应，否则报错

最好是使用绝对路径

将需要的组件代码复制到body里面即可，例如tree用下面代码

<body class="easyui-layout">   
    <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;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body>

可以运行看看是不是想要的效果，我运行出来是这样的