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

一、走进easyUI的世界

news 2026/4/15 7:41:01

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

AppScale GTS核心组件深度解析：从数据存储到任务队列

AppScale GTS核心组件深度解析&#xff1a;从数据存储到任务队列 【免费下载链接】gts AppScale is an easy-to-manage serverless platform for building and running scalable web and mobile applications on any infrastructure. 项目地址: https://gitcode.com/gh_mirro…...

编程新知 2026/4/15 7:27:15

Phi-4-mini-reasoning推理能力边界测试｜基于ollama的128K长文本实测分享

Phi-4-mini-reasoning推理能力边界测试&#xff5c;基于ollama的128K长文本实测分享 1. 模型简介 Phi-4-mini-reasoning 是一个轻量级开源模型&#xff0c;专注于高质量推理任务。作为Phi-4模型家族的一员&#xff0c;它通过合成数据训练&#xff0c;特别强化了数学推理能力。…...

编程新知 2026/4/15 7:13:02

无刷电机参数智能转换工具：兼容PMSM与BLDC，支持磁链/反电势计算及FOC开发辅助

温馨提示&#xff1a;文末有联系方式一、多类型电机兼容的参数转换解决方案 本工具专为现代驱动系统设计&#xff0c;原生支持永磁同步电机&#xff08;PMSM&#xff09;、直流无刷电机&#xff08;BLDC&#xff09;等多种主流无刷电机类型&#xff0c;满足不同拓扑结构与控制策…...

编程新知 2026/4/15 6:36:36

嵌入式设备部署MogFace-large轻量版：从模型压缩到板载推理

嵌入式设备部署MogFace-large轻量版&#xff1a;从模型压缩到板载推理 最近有不少朋友在问&#xff0c;能不能把那些效果不错的人脸检测模型&#xff0c;比如MogFace-large&#xff0c;塞到树莓派或者Jetson Nano这类嵌入式板子里去跑。想法很好&#xff0c;但直接把原始模型丢…...

编程新知 2026/4/15 6:06:22

XVF3800麦克风阵列实战：从芯片选型到快速原型搭建

1. 为什么选择XVF3800麦克风阵列芯片&#xff1f; 第一次接触远场语音项目时&#xff0c;我和很多工程师一样陷入了方案选型的纠结。当时测试过基于STM32H7的DSP方案&#xff0c;也尝试过用RK3308跑开源算法&#xff0c;结果发现光是调试AEC&#xff08;声学回声消除&#xff0…...

编程新知 2026/4/15 6:04:19

2026数据中台选型：数据治理能力成决胜关键，谁在定义下一代“智能数据引擎”？

当企业数字化转型的焦点从“建平台”转向“用数据”&#xff0c;数据中台的建设逻辑正在被重塑。过去数年&#xff0c;数据中台作为核心战略&#xff0c;解决了大规模数据“进得来、存得下、算得动”的问题。然而&#xff0c;随着业务对数据实时性、准确性和易用性要求的指数级…...

编程新知 2026/4/15 5:58:18

Mediapipe与Unity3D实时手部动作捕捉与驱动全流程解析

1. 从摄像头到虚拟手&#xff1a;Mediapipe基础配置 Mediapipe作为谷歌开源的跨平台多媒体机器学习框架&#xff0c;最让我惊艳的就是它的手部关键点检测能力。记得第一次跑通demo时&#xff0c;看着屏幕上实时追踪的21个手部关节点&#xff0c;那种"未来已来"的震撼…...

编程新知 2026/4/15 4:26:37

全栈测试工程师：未来5年必备技能树

数字化转型下的测试角色重构在AI测试工具普及率突破60%的2026年&#xff0c;软件测试领域正经历从单一功能验证向全生命周期质量保障的转型。全栈测试工程师作为质量保障体系的核心枢纽&#xff0c;需构建技术深度与业务广度双轮驱动的能力模型。本文将系统解构未来五年测试从业…...

编程新知 2026/4/15 4:18:19

以爱毕业aibiye为代表的七家专业论文辅导团队，通过优质的在线指导在国内学术服务领域脱颖而出

核心工具对比速览 工具名称 核心优势 适用场景 降重效果 处理速度 aibiye 专业术语保留度高 理工科论文 40%→7% 快速 aicheck 逻辑结构保持好 社科类论文 38%→6% 极快 askpaper 上下文连贯性强 人文类论文 45%→8% 中等 秒篇 多语种支持 外语论文 42%…...

编程新知 2026/4/15 3:10:23

冷镦机常见故障原因及解决方法大全（实用版）

冷镦机作为金属成形领域的核心设备&#xff0c;其运行稳定性直接关系到生产效率和产品质量。随着行业向高速化、多工位化与智能化发展&#xff0c;设备故障的预防与高效解决变得更为关键。掌握系统性的故障排查与维护知识&#xff0c;是保障生产连续性的基础。本文将梳理常见故…...

编程新知 2026/4/15 2:35:45