easyUI_01

最新推荐文章于 2024-08-25 09:41:52 发布

Gorgeous_Tang

最新推荐文章于 2024-08-25 09:41:52 发布

阅读量377

点赞数 1

文章标签： easyui 前端 javascript eclipse

本文链接：https://blog.csdn.net/weixin_65479202/article/details/124576332

版权

一.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的常用组件

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

EasyUI的目录说明

1.1 下载路径

EasyUI的官网地址为：http://www.jeasyui.com/

1.2 必须的基础支持库

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

WEB项目搭建EasyUI环境

> 搭建环境的步骤如下：
>
> ```HTML
> 1. 导入需要的css样式文件。easyui.css icon.css
>
> 2. 导入相关的js文件
> jquery.min.js
> jquery.easyui.min.js
> jquery.easyui-lang-zh_CN.js
>
> 3. 注意：
> themes中的文件相对路径不能变。

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

```

EasyUI的三大基础概念

> 分别是：**属性，事件，方法**
>
> - 属性指的是EsayUI框架控件（HTML）的属性（设置插件的样式。图标，宽度，高度）
> - 事件指的是 EasyUI 框架控件可以触发的事件（如：点击事件、双击事件等）
> - 方法指的是 EasyUI 框架控件，只有调用了默认执行的逻辑代码块。（修改插件属性，状态。）

1. 属性设置

> **（1）HTML方式设置**
>
> ```html
> <标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>
> ```
> **经典示例**
>
> ```JSP
> 
> 
> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">风清扬</a>
> **（2）基于javascript方式设置**
>
> ```HTML
> <标签 id = "tag"></标签>
> $("#tag").插件名({
>     属性名:属性值,
>     属性名:属性值
> });

> 
> ```
>
> 经典实例
>

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

注意事项

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

> 问题：EsayUI有很多组件，那么属性、事件、方法、去哪里找呢？
>
> 答：**直接通过它的官方帮助文档，也可以在代码的src文件夹下查找**
>
> --通过官方 API（可以在网上找到中文版的）

> --通过src目录与plugins目录的文件代码查看。
>
> src目录是EsayUI的基础模块代码，plugins目录存放的是基于基础模块扩展的控件的实现代码
>

布局·layout

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

面板·panel

> panel是最为基础的布局组件，其他layout、accordion和tab等布局组件都要依赖panel。panel是一个容器，在他内部可以创建其他组件。
>
> 关于panel面板的属性，事件，方法可查阅API文档了解使用

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