EasyUI前端框架

1.常用的前端框架EasyUI框架，Jquery框架，Vue框架2.EasyUI的介绍介绍EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速提升开发效率。使用①　导入EasyUI的资源②　查阅API文档使用EasyUI的组件完成页面开发学习:① EasyUI提供的组件及其使用方式(API)② EasyUI的布局3.

诗酒趁少年の

471人浏览 · 2020-09-20 21:31:02

诗酒趁少年の · 2020-09-20 21:31:02 发布

1.常用的前端框架

EasyUI框架，Jquery框架，Vue框架

2.EasyUI的介绍

介绍

EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速提升开发效率。

使用

①　导入EasyUI的资源

②　查阅API文档使用EasyUI的组件完成页面开发

学习:

① EasyUI提供的组件及其使用方式(API)

② EasyUI的布局

3.EasyUI的常用组件

资源的介绍：

①　将从官网上下载的EasyUI的资源压缩包解压

在这里插入图片描述

②　demo文件夹:EasyUI官方提供的每个组件的使用示例效果代码。

③　locale文件夹:组件中显示的数据语言的js文件

④　plugins文件夹:是EasyUI提供的组件对应的js文件

⑤　src文件夹:源码文件夹

⑥　themes文件夹：EasyUI官方提供的整套的样式

⑦　jquery.min.js文件:依赖的jquery文件，建议使用官方提供的jquery文件不要自己随便更换版本，可能会造成版本不兼容。

⑧　jquery.easyui.min.js：封装了所有组件的js文件

EasyUI的常用组件

①　基础组件：常用的比较小的功能组件，不是每个网页中都会用到

②　布局组件: 很重要，每个网页都会使用，完成网页的布局的。

③　菜单与按钮组件:很重要，每个网页都会使用，在网页中完成菜单和按钮的效果

④　表单组件:很重要，搜集用户数据，封装了常用的数据校验，并支持自定义校验

⑤　窗口组件:在当前页面中显示子窗口效果，对页面中的功能进行完善。

⑥　数据网格和树组件:很重要，非常之重要。在网页中显示表格以及树状数据

4.组件的使用

1. easyui-panel 面板

作用

在网页中显示一个面板效果，可以在面板中显示网页中的数据

使用

①　在jsp页面中引入EasyUI的资源

②　在页面创建一个div标签，并设置其class属性，属性值为‘easyui-panel’

③　在div标签上使用属性data-options设置面板的初始化效果，设置组件的属性和

事件，以键值对的形式设置，不同的键值对使用逗号隔开。

④　可以使用jquery来调用组件提供的方法，根据用户在网页中的行为动作对组件

作出对应的操作。

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-neLnJNkp-1600608487649)(E:\有道云图片\qq433A8C57C88B51E6DF4A4B18D16012EA\b1de8ccc4dcd496ea51cbcf9d0264753\clipboard.png)]$

2. easyui的组件使用流程

①　在jsp中引入EasyUI的资源

②　在jsp页面使用HTML方式或者js方式创建组件

③　使用组件的属性和事件来初始化设置组件的效果

④　使用组件的方法实现组件和用户交互的效果

easyui-textbox组件

①　声明一个普通的input文本标签

②　通过js代码的方式完成textbox组件初始化效果

元素标签.组件名({属性:值，属性:值,…,事件名:函数…})

4. easyui-passwordbox组件

作用

在页面中显示一个密码框

使用

HTML标签方式或者js方式，参照API文档

效果示例

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uVT7Mg52-1600608487652)(E:\有道云图片\qq433A8C57C88B51E6DF4A4B18D16012EA\748d4c2147b0417d9f717b0d88927d8c\clipboard.png)]$

5. easyui-combobox下拉框组件

作用

在页面中显示一个下拉框效果，提供了丰富的属性和事件可以让我们根据需求来设置自己想要的组件效果。

使用

使用HTML标签方式或者js方式完成创建和初始化设置，参照API

效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQo2fqwb-1600608487656)(E:\有道云图片\qq433A8C57C88B51E6DF4A4B18D16012EA\aaeb9c8efd434749b7775b87106c98f5\clipboard.png)]$

6. easyui-datebox 日期框

作用

在页面中显示一个可以选择日期的文本框

使用

使用HTML标签创建和初始化或者使用js方式创建和初始化

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oMsrRsSf-1600608487659)(E:\有道云图片\qq433A8C57C88B51E6DF4A4B18D16012EA\699198bf6e3141aeadb4f37c16f7050b\clipboard.png)]$

具体信息看API

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...