当前位置：首页 > news >正文

一、走进easyUI的世界

news 2025/7/18 18:00:58

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>