easyUI简介

最新推荐文章于 2025-05-19 09:08:52 发布

Jiang呀

最新推荐文章于 2025-05-19 09:08:52 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架文章标签： html js css

本文链接：https://blog.youkuaiyun.com/JiangHu_Java/article/details/106876461

前端框架专栏收录该内容

17 篇文章

订阅专栏

本文介绍了easyUI，一种基于jquery的UI框架。虽然现在不流行，但因其免费、文档完整、组件丰富，适合初学者作为前端框架入门。文章讲解了如何引入easyUI并展示基础layout，帮助读者了解其基本使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是easyUI？

easyUI是一种基于jquery加上html4的一种ui框架，ui框架顾名思义就是与界面有挂钩的。

特点：

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

easyui节省网页开发的时间和规模。

easyui很简单但功能强大也更加稳定。

官方地址：http://www.jeasyui.net/

ui框架

ui框架	流行年份	特点	是否需要收费
easyUI	2016	功能全面，但不支持响应式，不够美观	不收费
bootstrap	2016-2018	页面美观，支持响应式	收费
layUI	2018-2019	页面美观，但本身带bug，支持响应式	不收费

为什么要学习easyUI

前面可以看到easyUI其实在现在已经不是很流行，那么我们为什么还要学习easyUI呢？

首先从开发成本上来说，easyUI是不收费的，其次从官网的学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要优于layui。

所以在学习前端框架上来说，我们可以先学习easyUI，再学习其他的前端框架会比较容易！

了解easyUI的基础layout

我们得先学会引入easyUI：

 <!-- 全局样式 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/default/easyui.css">   
    <!-- 定义图标的样式 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/icon.css">   
   	<!-- 组件库源文件的js文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.min.js"></script>   
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.easyui.min.js"></script>

记住路径顺序千万不能放错顺序！也不要少些或者漏写路径

index界面：

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 全局样式 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/default/easyui.css">   
    <!-- 定义图标的样式 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/icon.css">   
   	<!-- 组件库源文件的js文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.min.js"></script>   
    <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.easyui.min.js"></script>  
    
    <title>Layout布局</title>
    </head>
    <body class="easyui-layout">
    	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">1111</div>
    	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">2222</div>
    	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">3333</div>
    	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">4444</div>
    	<div data-options="region:'center',title:'Center'"></div>
    </body>
    </html>
    ```