一、简介
1、ui框架比较:
easyui=jquery+tml4(用来做后台的管理界面)——2016版本,不要钱
bootstrap=jQuery+HTML5——2016-2018,要钱,api文档不全
layui——2018-2019,不要钱,有bug,文档不全
2、我们为什么要学习easyui:
从效果来看easyui的界面效果要远远差于bootstrap
跟layui比,界面效果也更差。
从金钱的角度上,开发首先会排除掉bootstrap
从学习文档的完整性、前端框架的稳定性,组件的丰富性考虑,easyui都要优于layui
why:快速开发
what:html4+jQuery的快速开发的前端框架
where:后端开发管理界面
常用控件:layout、tree、tabs、datagrid、form、messager、combobox
以下简单了解下控件:
layout布局:布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套,用户可以通过组合布局构建复杂的布局结构。
tree:树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能
tabs:选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单,包括关闭按钮和其他自定义按钮。
二、演示
我们需要的样式可以从帮助手册文档里找
1、我们需要建一个静态文档Folder,导入我们的easyui文件
2、我们建一个界面,复制前面文档的入门指南,按照图片选中,按Z中Ctrl+Shift+R,找到easyui
可以有多种样式选择
3、路劲改为项目的全路径,为了使别人使用,自己方便改项目,建议以下操作使路径更加灵活性
4、以layout布局进项演示,从文档中选中代码进行复制,运行到我们项目中
5、可以从它给的样式中进行筛选,选择代码的去留