如需温习上一节内容，请点击下方链接进行跳转：
Bootstrap03_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转：Bootstrap—-02_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转：Bootstrap01【前端开发框架】_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转。JavaWEB之AJAX快速入门_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转。JavaWEB之MVC购物车_云彩123的博客-CSDN博客1.引入问题1：先有servlet还是先有jsp？先有servletweb发https://blog.csdn.net/m0_64522859/article/details/124579876
目录
1.jQuery EasyUI框架概述
1.1 什么是jQuery EasyUI?
1.2 jQuery Easy的作用
1.3 EasyUI的目录说明
1.3.1 下载路径
1.3.2 必须的基础支持库
1.3.3 目录说明
2.WEB项目搭建EasyUI环境
搭建环境的步骤如下：
3.EasyUI入门示例
3.1 标准开发步骤
3.2 代码模板
3.3 EasyUI的三大基础概念
3.3.1 属性设置
3.3.2 事件触发设置
3.3.3 方法调用设置
4.注意事项
5.关于组件之间的依赖关系
6.控件使用说明
7.布局·layout
8.面板·panel
8.1 经典示例
今天的主要学习内容：
插件实现:
① HTML标签+插件的class样式。
<a href="#" class="easyui-linkbutton">我是讲文明</a>
② HTML标签+基于编程的插件实现
<a href='#' id="btn">我是ZKING ZZ</a>
js代码： $"#btn").linkbutton);插件内容：
属性：设置插件的样式。图标，宽度，高度。
事件：单击事件，双击
方法：修改插件属性，状态。
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-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.js3. 注意：
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个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
<!-- 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 经典示例
<!-- 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>