如需温习上一节内容，请点击下方链接进行跳转：

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.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").插件名({
   属性名:属性值,
   属性名:属性值
});

经典实例 ：

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

EasyUI【入门】相关推荐

Easyui入门视频教程第01集---认识Easyui
认识EasyUI 目录 ----------------------- Easyui入门视频教程第09集---登录完善图标自定义 Easyui入门视频教程第08集---登录实现 ajax b ...
EasyUI入门教程整理与示例代码下载
场景 EasyUI环境搭建与入门基础语法 https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90760947 EasyUI中拖动dra ...
Easyui入门视频教程第11集---Window的使用
目录 Easyui入门视频教程第11集---Window的使用 Easyui入门视频教程第10集---Messager的使用 Easyui入门视频教程第09集---登录完善图标自定义 ...
EasyUI学习总结(一)——EasyUI入门
一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.4.1 下载完成之 ...
JQuery EasyUI入门
JQuery EasyUI入门 @(JavaScript)[jQuery, EasyUI, 入门] JQuery EasyUI入门基本概述案例 Layout布局 Accordion手风琴 Tab选 ...
EasyUI入门（DataGrid）
DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识.它是轻量级的且功能丰富.单元格合并. ...
EasyUI入门（LinkButton，Tabs）
今天在来按照文档上的Demo写一下效果. 一.LinkButton(按钮) 按钮组件使用超链接按钮创建.它使用一个普通的<a>标签进行展示.它可以同时显示一个图标和文本,或只有图标或文字. ...
Easy-UI入门案例
Easy-UI是封装了前台逻辑以及显示的基于Jquery技术的前端框架. Easy-UI特点 EasyUI支持两种渲染方式分别为javascript方式(如:$('#p').panel({-}))和h ...
EasyUI入门9 EasyUI+NPOI+QrCode实现带二维码复杂格式excel文件导出
概述导出excel文件,而且文件带有复杂的表头格式并有二维码信息.前端界面是easyui,后端是.net(用ashx方式),使用了NPOI和Qrcode,本示例还增加了页面参数传值,实现的思路很简单 ...
easyUI入门《十一、linkbutton基础：按钮》
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Ins ...

EasyUI【入门】

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 经典示例

EasyUI【入门】相关推荐

最新文章

热门文章