EasyUi 快速入门
文章目录
一.easyUI的简介
二.easyUI的不足之处
三.学easyUI的好处
四.easyUI的特点
五、EasyUI的常用组件
总结
一.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 EasyUI简介：封装大量的jQuery插件(简化ajax，jquery，css样式，布局)**
>
>
>
> **学习目标：**
>
> 
>
> **学习内容：**
>
> ```html
> 插件实现:
> ① HTML标签+插件的class样式。
> <a href="#" class="easyui-linkbutton">我是讲文明</a>
> ② HTML标签+基于编程的插件实现
> <a href='#' id="btn">我是ZKING ZZ</a>
> js代码： $("#btn").linkbutton();
>
> 插件内容：
> 属性：设置插件的样式。图标，宽度，高度。
> 事件：单击事件，双击
> 方法：修改插件属性，状态。
> ```
>
> **学习方法：**
>
> ```html
> 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的官网地址为：http://www.jeasyui.com/
##### 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环境
> 搭建环境的步骤如下：
>
> ```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>
```
### 3.EasyUI入门示例
> 需求：将a链接标签转换成easy样式按钮。
#### 3.1 标准开发步骤
> 使用EasyUI中的**linkbutton按钮插件**实现该需求。
>
> ```HTML
> 标签： <a href="#">按钮</a>
>
> 样式名： 规范: easyui-样式名
> <a href="#" class="easyui-linkbutton">按钮</a>
> js插件名：
> $("选中超链接").插件名();
> $("a").linkbutton();
> ```
#### 3.2 代码模板
> - 实现方式一：HTML标签+EasyUI样式
>
> ```jsp
> <!-- HTML标签+EasyUI样式 -->
> <a href = "#" class = "easyui-linkbutton">东方不败</a>
> ```
>
> - 实现方式二：HTML标签+编程插件方法
>
> ```jsp
> <!-- 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方式设置**
>
> ```html
> <标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>
> ```
>
> **经典示例**
>
> ```JSP
> <!-- HTML标签 + esyui-样式 -->
> <!-- iconCls 图标 -->
> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">风清扬</a>
> ```
>
> **（2）基于javascript方式设置**
>
> ```HTML
> <标签 id = "tag"></标签>
> $("#tag").插件名({
> 属性名:属性值,
> 属性名:属性值
> });
> <!--
> 注意事项：
> 1.字符串类型的数值一定要有引号（单引号，或者双引号都可以）
> 2.属性之间使用逗号分隔，最后一个属性不可以有逗号
> -->
> ```
>
> **经典实例**
>
> ```JSP
> <!-- 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方式设置[不推荐]**
>
> ```HTML
> <标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>
> ```
>
> **经典示例**
>
> ```HTML
> <a href="#" class="easyui-linkbutton" data-options="onClick:testEvent">黄浩</a>
> <script>
> function testEvent(){
> alert("我被点了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
> //调用按钮的 disable方法。
> //$("按钮").linkbutton('disable');
> $("a:first").linkbutton('disable');
> }
> </script>
> ```
>
> **（2）基于javascript方式设置**
>
> ```HTML
> <标签 id = "tag"></标签>
> $("#tag").插件名({
> 属性名:属性值,
> 属性名:属性值,
> 事件名:function(){
>
> }
> });
> ```
>
> **经典示例**
>
> ```HTML
> <a style="color: green;" id="btn1" href="#">风清扬</a>
> <script>
> //使用easyui按钮插件
> $("#btn1").linkbutton({
> onClick:function(){
> alert("风清扬，被点了。");
> }
> });
> </script>
> ```
##### 3.3.3 方法调用设置
> ```java
> 调用模板：
> $("标签").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个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
>
> 
>
> ```html
> <!-- 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>
> ```
### 8.面板·panel
> panel是最为基础的布局组件， 其他layout、accordion和tab等布局组件都要依赖panel。panel是一个容器，在他内部可以创建其他组件。
>
> **关于panel面板的属性，事件，方法可查阅API文档了解使用**
#### 8.1 经典示例
```jsp
<!-- 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>
```
EasyUi 快速入门相关推荐
- EasyUI快速入门实战教程（一）
1.jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开 ...
- easyui（快速入门）
目录 1.jQuery EasyUI框架概述 1.1 什么是jQuery EasyUI? 1.2 jQuery Easy的作用 1.3 EasyUI的目录说明 2.WEB项目搭建EasyUI环境 3. ...
- ExtJS快速入门学习指南
前言:个人理解ExtJS其实 是一个Ajax 框架,是一个用javascript 写的.与EasyUI差不多的一个框架.学习并不难,先找好一定的学习资料与文档,然后再练习几个demo,这样大概就有所了 ...
- EasyUI【入门】
如需温习上一节内容,请点击下方链接进行跳转: Bootstrap03_云彩123的博客-CSDN博客如需温习上一节内容,请点击下方链接进行跳转:Bootstrap----02_云彩123的博客-CSD ...
- Shiro第一个程序:官方快速入门程序Qucickstart详解教程
目录 一.下载解压 二.第一个Shiro程序 1. 导入依赖 2. 配置shiro配置文件 3. Quickstart.java 4. 启动测试 三.shiro.ini分析 四.Quickstart. ...
- 计算机入门新人必学,异世修真人怎么玩？新手快速入门必备技巧
异世修真人怎么快速入门?最近新出来的一款文字修仙游戏,很多萌新不知道怎么玩?进小编给大家带来了游戏新手快速入门技巧攻略,希望可以帮到大家. 新手快速入门攻略 1.开局出来往下找婆婆,交互给点钱,旁边有 ...
- Spring Boot 2 快速教程：WebFlux 快速入门（二）
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘 ...
- Apache Hive 快速入门 (CentOS 7.3 + Hadoop-2.8 + Hive-2.1.1)
2019独角兽企业重金招聘Python工程师标准>>> 本文节选自<Netkiller Database 手札> 第 63 章 Apache Hive 目录 63.1. ...
- 《iOS9开发快速入门》——导读
本节书摘来自异步社区<iOS9开发快速入门>一书中的目录,作者 刘丽霞 , 邱晓华,更多章节内容可以访问云栖社区"异步社区"公众号查看 目 录 前 言 第1章 iOS ...
最新文章
- 分享一些自己常用的科研/软件工具
- mysql 调用webservice_C#调用Webservice的代码实现方式汇总
- 如何快速实现高并发短文检索-转
- C# 计算IP段之间的IP列表
- android wifimanager权限,Android 6.0.1 - 权限问题= wifiManager.getScanResults（）返回0
- Spring EL运算符实例
- mysql体系结构和存储引擎
- .java文件_【转】java文件操作大全
- Activity-数据状态的保存
- Ubuntu20.04 NAT 网络配置
- SAP License：SAP中的产量法折旧计算
- 不肯去幼儿园的小盆友
- mybatis中xml文件的#{param1}和#{属性名}，比如#{id}的使用环境以及使用的时机情况
- linux 中文ssid 显示乱码,把中文SSID变成乱码！一切正常了？_网络设备-中关村在线...
- Android 获取应用信息—PackageManager
- 日常办公中的40+电子签场景，覆盖核心业务及岗位签署需求
- 《湖畔》—— 读后总结
- 亚马逊 Alexa skill开发
- HTML简单动画制作
- 关于BandiZip的bug，linux解压下不友好情况