easyui（基础布局）

m0_l5z

于 2022-05-09 13:34:11 发布

阅读量623

点赞数

文章标签： easyui

本文链接：https://blog.csdn.net/m0_64863860/article/details/124662903

版权

本文介绍了EasyUI，一个基于jQuery的前端框架，用于快速构建后台管理界面。内容包括EasyUI的简介、不足之处、学习好处、特点以及常用组件如布局、面板的使用。文章强调了EasyUI的易用性和组件的依赖关系，并提供了入门示例和注意事项。

摘要由CSDN通过智能技术生成

一.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

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

jQuery EasyUI简介：封装大量的jQuery插件(简化ajax，jquery，css样式，布局)

学习目标：

学习内容：

插件实现:
① HTML标签+插件的class样式。
    <a href="#" class="easyui-linkbutton">我是讲文明</a>
② HTML标签+基于编程的插件实现
    <a href='#' id="btn">我是ZKING ZZ</a>
    js代码： $("#btn").linkbutton();

插件内容：
属性：设置插件的样式。图标，宽度，高度。
事件：单击事件，双击
方法：修改插件属性，状态。

学习方法：

1. 掌握easyui插件开发模板[记住]
2. 通过文档配合，学习他的属性 事件 方法。[查看文档]

day_01 EasyUI （入门）

1.jQuery EasyUI框架概述

1.1 什么是jQuery EasyUI?

JQuery EasyUI就是一套基础JQuery的富客户端的UI框架(简化ajax，jquery，css样式，布局)。像这些将常用的控件封装成一个UI库的框架统称富客户端框架

1.2 jQuery Easy的作用

既然EasyUI是一个UI框架，所以它的功能就是用于处理页面的展示效果的。通常用于完成后台管理系统的页面排版。

现在市面有哪些常用富客户端框架：EasyUI、LigerUI、ExtJS

1.3 EasyUI的目录说明

1.3.1 下载路径

EasyUI的官网地址为：EasyUI - helps you build your web pages easily

1.3.2 必须的基础支持库

标红的文件夹是PC端使用EasyUI框架，必须导入的基础库文件。

1.3.3 目录说明

demo：例示，非常重要，以后做开发，记不起来代码，可以直接复制例示。

demo-moblie：手机端的例示，因为手机端已经有很多优秀UI框架，所以EasyUI在手机端基本没有人用的（忽略）。

locale：编码支持库

plugins：没有压缩过的插件源码

src：没有压缩过的核心源码

themes：主题样式，有个可以选择

easyloader.js：源码加载器

jquery.easyui.min.js：PC使用类库。

jquery.easyui.moblie.js：手机端使用类库

jquery.min.js：Jquery框架

2.WEB项目搭建EasyUI环境

搭建环境的步骤如下：

1. 导入需要的css样式文件。easyui.css    icon.css

2. 导入相关的js文件
   jquery.min.js
   jquery.easyui.min.js
   jquery.easyui-lang-zh_CN.js

3. 注意：
   themes中的文件相对路径不能变。

<!-- 引入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>

3.EasyUI入门示例

需求：将a链接标签转换成easy样式按钮。

3.1 标准开发步骤

使用EasyUI中的linkbutton按钮插件实现该需求。

标签： <a href="#">按钮</a>

样式名： 规范: easyui-样式名
    <a href="#" class="easyui-linkbutton">按钮</a>
js插件名：
$("选中超链接").插件名();
$("a").linkbutton();

3.2 代码模板

实现方式一：HTML标签+EasyUI样式

<!-- HTML标签+EasyUI样式 -->
<a href = "#" class = "easyui-linkbutton">东方不败</a>

实现方式二：HTML标签+编程插件方法

<!-- HTML标签+ easyui 插件方法 -->
<a style="color: green;" id="btn1" href="#">风清扬</a>

<script>
    //使用easyui按钮插件
    $("#btn1").linkbutton();
</script>

3.3 EasyUI的三大基础概念

分别是：属性，事件，方法

属性指的是EsayUI框架控件（HTML）的属性（设置插件的样式。图标，宽度，高度）

事件指的是 EasyUI 框架控件可以触发的事件（如：点击事件、双击事件等）

方法指的是 EasyUI 框架控件，只有调用了默认执行的逻辑代码块。（修改插件属性，状态。）

3.3.1 属性设置

（1）HTML方式设置

<标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>

经典示例

<!-- HTML标签 + esyui-样式 -->
<!-- iconCls 图标 -->
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">风清扬</a>

（2）基于javascript方式设置

<标签 id = "tag"></标签>
$("#tag").插件名({
    属性名:属性值,
    属性名:属性值
});
<!--
注意事项：
    1.字符串类型的数值一定要有引号（单引号，或者双引号都可以）
    2.属性之间使用逗号分隔，最后一个属性不可以有逗号
-->

经典实例

<!-- HTML标签+ easyui 插件方法 -->
<a style="color: green;" id="btn1" href="#">风清扬</a>
<script>
    //使用easyui按钮插件
    $("#btn1").linkbutton({
        iconCls:'icon-cancel',
     size:'large'
    });
</script>

3.3.2 事件触发设置

（1）HTML方式设置[不推荐]

<标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>

经典示例

<a href="#" class="easyui-linkbutton" data-options="onClick:testEvent">黄浩</a>
<script>
    function testEvent(){
        alert("我被点了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
        //调用按钮的 disable方法。
        //$("按钮").linkbutton('disable');
        $("a:first").linkbutton('disable');
    }
</script>

（2）基于javascript方式设置

<标签 id = "tag"></标签>
$("#tag").插件名({
    属性名:属性值,
    属性名:属性值,
    事件名:function(){

    }
});

经典示例

<a style="color: green;" id="btn1" href="#">风清扬</a>
<script>
    //使用easyui按钮插件
    $("#btn1").linkbutton({
        onClick:function(){
        alert("风清扬，被点了。");
    }
});
</script>

3.3.3 方法调用设置

调用模板：
$("标签").easyui插件名('方法名',方法传入的参数);

例如：
$('#btn1').linkbutton('resize', {
    width: '100%',
    height: 32
});

4.注意事项

我们必须要理解属性、事件、方法的使用方式，因为所有的EasyUI组件的就是千篇一律地使用上述的这三种概念的知识完成界面的构建以及事件的触发。

问题：EsayUI有很多组件，那么属性、事件、方法、去哪里找呢？

答：直接通过它的官方帮助文档，也可以在代码的src文件夹下查找

--通过官方 API（可以在网上找到中文版的）

--通过src目录与plugins目录的文件代码查看。

src目录是EsayUI的基础模块代码，plugins目录存放的是基于基础模块扩展的控件的实现代码

5.关于组件之间的依赖关系

通过官方的API文档，我们发现有很多控件与控件之间是有依赖关系的。

所以，如果当属性、事件、方法在当前控件找不到，可以去它的父控件上面去寻找。

6.控件使用说明

常用控件：
包括了Base（基础）、Layout（布局）、Menu and Button（菜单和按钮）、Form（表单）、Window（窗口）、
DataGrid and Tree（表格和树）、Extension（扩展）
本节课主要讲述以下组件的使用：

layout（布局组件）：panel面板，tabs选项卡，accordion分类，layout布局

7.布局·layout

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

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

8.面板·panel

panel是最为基础的布局组件，其他layout、accordion和tab等布局组件都要依赖panel。panel是一个容器，在他内部可以创建其他组件。

关于panel面板的属性，事件，方法可查阅API文档了解使用

8.1 经典示例

<!-- panel面板基本示例 -->
<div id = "oDiv" class = "easyui-panel">
    helloworld
    <a id = "btn" href = "#" class = "easyui-linkbutton">按钮</a>
</div>
<script type = "text/javascript">
    $("#oDiv").panel({
        //设置标题
        title:'我是标题',
        //设置图标
        iconCls:'icon-man',
        //设置宽度
        width:500,
        //设置高度
        height:400,
        //可折叠
        collapsible:true,
        //可放大
        maximizable:true,
        //可缩小
        minimizable:true,
        //可关闭
        closable:true,
        //绑定按钮组
        tools:"#btn",
        //ajax异步加载远程的内容，显示在面板中
        href:'${pageContext.request.contextPath }/index.jsp'
    });
</script>