EasyUI的基本了解和使用

EasyUI的基本了解和使用EasyUI是什么？EasyUI如何使用？总结EasyUI是什么？easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。easyui是个完美支持HT...

李小轮。

2793人浏览 · 2019-05-06 18:37:27

李小轮。 · 2019-05-06 18:37:27 发布

EasyUI的基本了解和使用

EasyUI是什么？
- EasyUI如何使用？
- 总结

EasyUI是什么？

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。

总结：easui就是利用现有的jQuery，js，css等基本语法，将我们常用的一些组件的过程封装好了，我们只需要使用其提供的接口，就可以很容易的使用其来生成比较美观的界面，常用于后台等界面的开发。

EasyUI如何使用？

基本步骤如下：

1.去官网下载http://www.jeasyui.net/相应的easyui版本的压缩包，解压下来是一些文件夹如下图（其中红色部分是所需的基本包和文件）：

2.项目中引入相应的js和css

3.html或jsp中head标签中引入上述js，css

4.具体使用，两种使用方式简单举例：CSS方式和JS方式

CSS方式：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="./themes/icon.css">
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" >CSS方式</a>
</body>

结果：
在这里插入图片描述
JS方式：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<link rel="stylesheet" type="text/css" href="./themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="./themes/icon.css">
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
	
	<script type="text/javascript">
		$(function() {
			$('#btn').linkbutton({    
			    iconCls: 'icon-search'   
			});  
		})
	</script>
	
</head>
<body>
	<a id="btn" href="#">JS方式</a>
</body>
</html>

总结

上面是我简单的一点关于EasyUI的介绍，目的是让大家知道EasyUI是个什么东西，EasyUI使用是起来还是十分方便的，具体其他的使用我就不一一说明了，可以自己去下载EasyUI的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}$/, //不连续的两位字母// /^