一、走进easyUI的世界

最新推荐文章于 2024-06-19 21:34:23 发布

怀梦

最新推荐文章于 2024-06-19 21:34:23 发布

阅读量503

点赞数

分类专栏： easyUI快速入门文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/weixin_44230693/article/details/130639527

版权

easyUI快速入门专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1.什么是easyUI？

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

简单地说，easyUI就是一种基于jQuery的用户界面插件集合。使用easyUI你不需要写很多代码了，只需要通过编写一些简单的HTML标记，就可以定义用户界面。而且，easyUI是个完美支持HTML5网页的完整框架，它可以节省您网页开发的时间和规模。

2.下载easyUI

官网地址

在这里插入图片描述

接着，再点击Download按钮，正式进入到easyUI的下载界面。

在这里插入图片描述

紧接着，点击Download按钮即可下载easyUI了

在这里插入图片描述

3.easyUI的快速入门

3.1.创建项目，并在项目中导入easyUI所需的样式和js

新建一个动态web工程，例如easyui，把解压后的jquery-easyui-1.8.8目录中的如下东东添加到项目中去

在这里插入图片描述

将以上这些目录和文件拷贝到项目之后，就变成下面这个样子

在这里插入图片描述

3.2.以linkbutton（按钮）组件为例快速入门easyUI

3.2.1.在页面中导入easyUI所需的js和css样式文件

新建一个01-easyui.html页面。引入必要的js和css样式文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>easyUI的简单入门</title>
		<!-- 引入easyUI的css样式文件和js文件 -->
		<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>
		
	</body>
</html>

注意：因为easyUI基于jQuery的，所以在引入js文件的时候必须先引入query.min.js再引入jqery.easyui.min.js。

3.2.2.easyUI使用的两种方式

easyUI的使用主要有两种方式，一种是在HTML标签中声明class来使用easyUI样式，一种是编写js代码。

第一种方式：在HTML标签中声明class来使用easyUI样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>easyUI的简单入门</title>
		<!-- 引入easyUI的css样式文件和js文件 -->
		<link rel="stylesheet" type="text/css" href="./js//themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="./js/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>
		<!-- easyUI的简单入门(方式一：使用css的方式)-->
		<!-- iconCls(属性): 小图标样式 -->
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">超链接</a>
	</body>
</html>

在这里插入图片描述

可以看到超链接变成了一个还算好看的按钮，而且按钮前面还有一个加号的图标，这是由于将iconCls属性的值设置为了’icon-add’，

当然了，可以设置成其他的值，比如’icon-search’、'icon-remove’等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>easyUI的简单入门</title>
		<!-- 引入easyUI的css样式文件和js文件 -->
		<link rel="stylesheet" type="text/css" href="./js//themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="./js/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>
		<!-- easyUI的简单入门(方式一：使用css的方式)-->
		<!-- iconCls(属性): 小图标样式 -->
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">超链接</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">超链接</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">超链接</a>
	</body>
</html>

在这里插入图片描述

第二种方式：编写js代码的方式

首先，在01-easyui.html页面中创建一个超链接，并编写如下的一段js代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>easyUI的简单入门</title>
		<!-- 引入easyUI的css样式文件和js文件 -->
		<link rel="stylesheet" type="text/css" href="./js//themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="./js/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>
		<!-- easyUI的简单入门(方式一：使用css的方式)-->
		<!-- iconCls(属性): 小图标样式 -->
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">超链接</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">超链接</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">超链接</a>
		<!-- 方式二：编写js代码的方式 -->
		<a href="#" id="btn">超链接</a>
	</body>
</html>