easyui01（基础布局）

一.easyUI的简介

    easyui是一款基于jQuery的前端框架，可以使用其中的组件进行布局以及用来做后台的管理界面。
    EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速提升开发效率。

    使用：
    ① 导入EasyUI的资源
    ② 查阅API文档使用EasyUI的组件完成页面开发

二.easyUI的不足之处

    现在据了解到有三种UI框架，分别是easyUI、bootstrap、layUI这三种。

    不足之处： 从效果来看easyui的界面效果要远远差于bootstrap，跟layui比，界面效果也更差

三.学easyUI的好处

    虽然说它的效果界面并不是那么好看，但是它也有它的好处，而且easyUI要简单学些，如果学会的easyUI框架，那么上手layUI就会轻松许多。

    好处：
    1.从金钱的角度上，开发首先会排除掉bootstrap。

    2.从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要优于layui。

    3.从公司的角度考虑选用那个框架成本、公司的后端技术人员前端功底、前端的社区活跃度。

    注意：
    使用EasyUI，其实就是在使用别人已经封装好的代码来完成自己的页面开发。
    所以必须按照EasyUI的文档说明来使用。所以我们学习EasyUI，其实就是在
    学习如何按照EasyUI的文档来使用其组件并且其常用组件有哪些。

四.easyUI的特点
   

easyUI是一种基于jQuery的用户界面插件集合.

    easyUI为创建现代化，互动，JavaScript应用程序，提供必要的功能。

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

    easyUI是个完美支持HTML5网页的完整框架。

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

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

五、EasyUI的常用组件

frameset

① 基础组件：常用的比较小的功能组件，不是每个网页中都会用到
② 布局组件: 很重要，每个网页都会使用，完成网页的布局的。
③ 菜单与按钮组件:很重要，每个网页都会使用，在网页中完成菜单和按钮的效果
④ 表单组件:很重要，搜集用户数据，封装了常用的数据校验，并支持自定义校验
⑤ 窗口组件:在当前页面中显示子窗口效果，对页面中的功能进行完善。
⑥ 数据网格和树组件:很重要，非常之重要。在网页中显示表格以及树状数据

EasyUI的目录说明

 WEB项目搭建EasyUI环境

<!-- 引入EasyUI的css依赖 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/default/easyui.css">
​
<!-- 引入EasyUI的图标依赖 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/icon.css">
​
<!-- 引入EasyUI的相关JS依赖 -->
<script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/jquery.min.js"></script>
​
<script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/jquery.easyui.min.js"></script>
​
<script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>

 

 布局·layout

<!-- fit:true 自适应屏幕 -->
<div id="cc" class="easyui-layout"  data-options = "fit:true">   
    <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>   
    </div>