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

一、走进easyUI的世界

news 2025/11/19 7:13:21

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

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/11/17 0:42:03

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/11/17 10:40:04

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/11/16 22:06:11

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/11/17 0:20:43

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/11/17 0:08:28

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/10/16 16:03:09

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/11/16 22:43:05

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19