Easyui入门

最新推荐文章于 2024-04-28 12:03:45 发布

大佬员阿乐

最新推荐文章于 2024-04-28 12:03:45 发布

阅读量163

点赞数

文章标签： easyui jquery

本文链接：https://blog.youkuaiyun.com/m0_60390944/article/details/120228319

版权

本文介绍了EasyUI作为前端开发框架的优势，包括快速构建后端管理界面、丰富的控件库等。EasyUI基于html4和jQuery，性价比优于Bootstrap和Layui。通过引入必要的css和js文件，可以轻松实现页面布局，如Layout的五区域设计。文章还展示了如何创建一个不包含东区的完整页面布局，并给出了实际效果。

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

一、了解easyui

1、简介
①、why:快速开发，前端+后端（重点）无限极分类自己能用免费使用从效果来看easyui的界面效果要远远差于bootstrap和layui但 bootstrap（要钱）layui（有bug)；从各方面看easyui的性价比都远远高于后两者

②、what：html4+jQuery的快速开发的前端框架

③、where：后端开发管理界面从公司的角度考虑选用哪个框架；其成本、公司的后端技术人员前端功底、前端的社区活跃度都要考虑

easyui常用控件： layout、tree、tabs、datagrid、form、messager、combobox

二、引入框架的css文件及js 文件

无论使用哪一个前端框架，都必须引入
该框架的css文件以及js文件，而且必须在引入的该框架js文件之前
引入jquery.js文件

在WebContent下建立static文件夹，在static下建立css、js、image 文件夹

三、下载程序库并导入easyui的css和javascript文件到界面

1、在程序库中复制相对路径

找到最后的路径名用快捷键 ctrl+shift+R 将它改为绝对路径

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

四、Layout（布局）

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

1、使用完整页面创建布局（去掉东边区域面板）

<body class="easyui-layout">   
    <div data-options="region:'north',title:'logo',split:true" style="height:100px;"></div>   
    <div data-options="region:'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:'目录',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;"></div>   
</body>