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

一、走进easyUI的世界

news 2026/1/3 10:01:40

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>

在这里插入图片描述

相关文章：

一、走进easyUI的世界

1.什么是easyUI&#xff1f; jQuery EasyUI是一组基于jQuery的UI插件集合体&#xff0c;而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript&#xff0c;也不需要对css样式有深入的了解&#xff0c;开发者需要…...

编程日记 2023/5/18 12:00:49

2023 上半年软件设计师知识点复习总纲

前言&#xff1a;全国计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试&#xff08;以下简称IT职业资格考试&#xff09;是由中华人民共和国人事部主管&#xff0c;国家计算机网络与信息安全管理中心主办的一项国家级、权威性的计算机职业技能水平认证考试。主要…...

编程日记 2023/5/31 14:04:31

深入理解Java虚拟机：JVM高级特性与最佳实践-总结-3

深入理解Java虚拟机&#xff1a;JVM高级特性与最佳实践-总结-3 垃圾收集器与内存分配策略垃圾收集算法标记-清除算法标记-复制算法标记-整理算法 垃圾收集器与内存分配策略 垃圾收集算法 标记-清除算法 最基础的垃圾收集算法是“标记-清除”&#xff08;Mark-Sweep&#xff…...

编程日记 2023/5/18 11:50:47

vue3 cesium datav 可视化大屏

目录 0. 预览效果 1. 代码库包 2. 技术点 3. 一些注意事项&#xff08;配置参数&#xff09; 4. 相关代码详情 0. 预览效果 包含的功能&#xff1a; ① 地球按照一定速度自转 ② 修改加载的geojson面样式 ③ 添加 文字 标注&#xff01; 1. 代码库包 直接采用vue-cli5 创建…...

编程日记 2023/6/1 0:28:22

python内置函数，推导式

abs&#xff1a;取绝对值 data abs&#xff08;-10&#xff09; pow&#xff1a;次方 data pow&#xff08;2&#xff0c;5&#xff09; sum&#xff1a;求和 num_list p[1,2,10,20] res sum(num_list) divmod取商和余数&#xff1a; v1&#xff0c;v2 divmod&…...

编程日记 2023/5/18 11:40:43

【Flink】DataStream API使用之Flink支持的数据类型

Flink的使用过程中&#xff0c;我们的数据都是定义好的 UserBehavior 类型&#xff0c;那还有没有其他更灵活的类型可以用呢&#xff1f;Flink 支持的数据类型到底有哪些&#xff1f; 1. Flink 的类型系统 Flink 作为一个分布式处理框架&#xff0c;处理的是以数据对象作为元…...

编程日记 2023/5/30 6:48:23

QT实现固高运动控制卡示波器

目录 一、固高示波器 二、基于QCustomPlot实现示波器 三、完整源码 一、固高示波器 固高运动控制卡自带的软件有一个示波器功能&#xff0c;可以实时显示速度的波形&#xff0c;可辅助分析电机的运行状态。但是我们基于sdk开发了自己的软件&#xff0c;无法再使用该功能&…...

编程日记 2023/5/30 6:48:20

洛谷P1157详解（两种解法，一看就会）

一、问题引出 组合的输出 题目描述 排列与组合是常用的数学方法&#xff0c;其中组合就是从 n n n 个元素中抽出 r r r 个元素&#xff08;不分顺序且 r ≤ n r \le n r≤n&#xff09;&#xff0c;我们可以简单地将 n n n 个元素理解为自然数 1 , 2 , … , n 1,2,\dot…...

编程日记 2023/6/1 8:59:57

JavaScript异步编程和回调

目录 1、编程语言中的异步 2、JavaScript 3、回调 &#xff13;.&#xff11;在回调中处理错误 &#xff13;.&#xff12;回调的问题 &#xff13;.&#xff12;回调的替代方案 1、编程语言中的异步 默认情况下&#xff0c;JavaScript是同步的&#xff0c;并且是单线程…...

编程日记 2023/5/30 6:48:16

Qt开发笔记（Qt5.9.9下载安装环境搭建win10）

#1 Qt下载网站&#xff08;国内、国外镜像&#xff09; #2 Qt5.9.9安装选项 #3 配置系统环境变量 #4 创建测试项目 #1 Qt下载网站&#xff08;国内、国外镜像&#xff09; 官方下载地址&#xff08;慢&#xff09;&#xff1a;http://download.qt.io/ 国内镜像网站 这里给大家…...

编程日记 2023/6/1 0:30:10

使用Plist编辑器——简单入门指南

本指南将介绍如何使用Plist编辑器。您将学习如何打开、编辑和保存plist文件&#xff0c;并了解plist文件的基本结构和用途。跟随这个简单的入门指南&#xff0c;您将掌握如何使用Plist编辑器轻松管理您的plist文件。 plist文件是一种常见的配置文件格式&#xff0c;用于存储应…...

编程日记 2023/5/30 6:48:11

Python常用的开发工具合集

​ Python是一种功能强大且易于学习的编程语言&#xff0c;被广泛应用于数据科学、机器学习、Web开发等领域。随着Python在各个领域的应用越来越广泛&#xff0c;越来越多的Python开发工具也涌现出来。但是&#xff0c;对于新手来说&#xff0c;选择一款合适的Python开发工具可…...

编程日记 2023/6/1 9:00:47

机器学习之线性回归

往期目录 python在线性规划中的应用 文章目录 一、线性回归算法概述1.1 什么是线性回归&#xff1f;1.2 线性回归算法原理1.3 线性回归的应用场景 二、线性回归算法Python实现2.1 导入必要的库2.2 随机生成数据集2.3 拟合模型2.4 预测结果2.5 结果可视化 三、完整代码 线性回归…...

编程日记 2023/5/30 6:48:06

中国系统正式发声！所有用户永久免费，网友：再见了，CentOS！

点关注公众号&#xff0c;回复“1024”获取2TB学习资源&#xff01; 如果说&#xff1a;没有操作系统会怎么样&#xff1f; 对于个PC来说&#xff0c;无论是台式机、笔记本、平板等等&#xff0c;一切都变的一无是处&#xff0c;这些硬件对我们来说&#xff0c;和一堆废铁没什么…...

编程日记 2023/5/30 6:48:04

Oracle数据库坏块类故障

正常的数据块有其特有的固定格式&#xff0c;如果某数据块内部出现了混乱而导致Oracle无法读取&#xff0c;则可称其为坏块。数据库坏块的影响范围可大可小&#xff0c;严重时会导致数据库无法打开。当数据库出现坏块时&#xff0c;一般出现ORA-01578错误、ORA-10632错误或者OR…...

编程日记 2023/5/30 6:48:02

andorid之摄像头驱动流程--MTK平台

camera成像原理&#xff1a; 景物通过镜头生产光学图像投射到sensor表面上&#xff0c;然后转为模拟电信号&#xff0c;经过数模变成数字图像信号&#xff0c;在经过DSP加工出来&#xff0c;然后在通过IO接口传输到CPU处理。 由于摄像头满足总线、驱动、设备模型&#xff0c;…...

编程日记 2023/5/30 6:48:00

Android9.0 iptables用INetd实现屏蔽ip黑名单的实现

1.前言 在9.0的系统rom定制化开发中，在system中netd网络这块的产品需要中，会要求设置屏蔽ip地址之内的功能，liunx中iptables命令也是比较重要的，接下来就来在INetd这块实现屏蔽ip黑名单的的相关功能，就是在app中只能屏蔽某个网址，就是除了这个网址，其他的都能上网,最后…...

编程日记 2023/5/30 6:47:58

介绍一下json

目录 介绍一下json Elasticsearch7.6学习指南 介绍一下json JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;它以易于阅读和编写的文本形式表示结构化数据。JSON最初是由Douglas Crockford在2001年提出的&#xff0c;它在we…...

编程日记 2023/6/1 8:09:41

DI依赖注入环境

1.构造器注入 上一章节已经说过了&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLoca…...

编程日记 2023/5/30 6:47:54

《程序员面试金典（第6版）》面试题 16.18. 模式匹配（暴力破解 + 剪枝）

题目描述 你有两个字符串&#xff0c;即pattern和value。 pattern字符串由字母"a"和"b"组成&#xff0c;用于描述字符串中的模式。 例如&#xff0c;字符串"catcatgocatgo"匹配模式"aabab"&#xff08;其中"cat"是"a&q…...

编程日记 2023/6/1 9:02:12

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2026/1/1 18:14:29

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/1 15:19:27

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/12/30 10:20:37

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2025/12/31 7:46:03

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/11/12 21:44:33

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

编程新知 2025/9/14 20:44:53

[拓扑优化] 1.概述

常见的拓扑优化方法有&#xff1a;均匀化法、变密度法、渐进结构优化法、水平集法、移动可变形组件法等。 常见的数值计算方法有&#xff1a;有限元法、有限差分法、边界元法、离散元法、无网格法、扩展有限元法、等几何分析等。 将上述数值计算方法与拓扑优化方法结合&#…...

编程新知 2026/1/2 8:32:01

Axure零基础跟我学：展开与收回

亲爱的小伙伴，如有帮助请订阅专栏！跟着老师每课一练，系统学习Axure交互设计课程！ Axure产品经理精品视频课https://edu.csdn.net/course/detail/40420 课程主题：Axure菜单展开与收回 课程视频：...

编程新知 2025/12/28 21:04:15

【Vue】scoped+组件通信+props校验

【scoped作用及原理】 【作用】 默认写在组件中style的样式会全局生效, 因此很容易造成多个组件之间的样式冲突问题 故而可以给组件加上scoped 属性&#xff0c; 令样式只作用于当前组件的标签 作用&#xff1a;防止不同vue组件样式污染 【原理】 给组件加上scoped 属性后…...

编程新知 2026/1/1 11:12:53