easyui入门

一、简介

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、可以从它给的样式中进行筛选，选择代码的去留