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

一、走进easyUI的世界

news 2026/2/10 0:58:53

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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/8 15:03:04

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2026/2/1 5:45:17

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2026/1/31 5:09:19

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2026/1/13 7:39:19

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

编程新知 2026/2/6 10:22:29

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2026/2/4 16:02:36

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/10/25 7:41:33