★ FEATURED ARTICLE 简介jQuery EasyUI 1.3.4图标与样式资源包面向前端开发者和后台系统搭建人员适合在页面与管理系统界面中快速引入统一图标体系免去重复设计。资源以zip压缩包提供整体约825KB核心包含CSS样式定义与多种图标图片素材按操作状态、导航指示、功能操作等类别组织覆盖成功、警告、错误、箭头、增删改编辑等常见图标可直接用于按钮、菜单、工具栏、面板和对话框等组件。已有204人浏览学习。实际使用时可借助CSS类名静态添加图标也能配合EasyUI插件在数据表格、树形面板等场景中动态调用还支持对颜色、尺寸、边距进行二次修改以匹配项目风格。对于需要快速搭建后台管理系统或桌面风格Web应用的前端团队这套资源能减少图标与样式定制成本让界面整体观感和交互提示更加直观清晰。1. jQuery EasyUI 1.3.4 图标与样式为什么这份资源还值得留一份一提到 jQuery EasyUI 1.3.4很多人的第一反应是“这都什么年代了还在用”。但恰恰是这些老掉牙的后台管理系统对图标和样式的需求比新项目更具体按钮、菜单、树、面板全部依赖 iconCls 和主题 CSS图标缺一个、样式乱一处改起来比写新页面还难受。这份资源包整理了 1.3.4 里能接触到的全部图标类并把常用扩展样式和覆盖写法做成了可以直接引用的文件。适合接手存量项目、统一老系统 UI、给 EasyUI 换肤的前端开发者。新人照着后面步骤配置老手可以跳过说明直接拿文件放进工程里用。资源包不是重新发明了一遍 EasyUI而是把散落在主题目录里的图标映射、背景图位置、覆盖规则统一汇总。看起来只是一堆 CSS 和 PNG实际上解决了“图标找不到、样式不敢动”的日常尴尬。2. EasyUI 1.3.4 资源结构图标命名、样式文件与引用顺序先说清楚资源包里的东西放哪儿。EasyUI 1.3.4 的图标和样式不是散装文件而是围绕主题目录组织的一套静态资源体系。常见的主题有 default、gray、black、bootstrap、metro每个主题目录里都有 easyui.css、icon.css 和 images 目录。easyui.css 管控件骨架icon.css 管图标类名与背景图的绑定images 里既有控件背景图也有图标图片本身。这套结构有它的历史原因。1.3.4 时代还没有现在这些 iconfont 方案图标就是图片。为了减少 HTTP 请求基础图标通常合并在一张精灵图里通过 background-position 定位。资源包在做整理时把每个主题下的图标类都核对了一遍补齐了缺失的 background-position并且把对应关系整理成了清单。这样做的好处是项目里换主题时不用重新改一遍按钮上的类名。2.1 图标资源在包里的组织形式拿到资源包解压后先看目录结构而不是急着翻图片预览。常见做法是所有主题保持原本的相对路径整个 themes 目录拷贝进项目。如果只拷贝一两个 CSS 文件大概率会漏掉 images 目录里的其他控件背景图。EasyUI 控件在渲染时面板标题、菜单箭头、树节点展开折叠图标都依赖 images 目录缺了图片就会出现奇怪的占位符。图标命名延续了 EasyUI 的约定基础操作类有 icon-add、icon-edit、icon-remove、icon-save功能类有 icon-search、icon-print、icon-help业务类有 icon-filter、icon-lock、icon-man。这些类名不是随便取的EasyUI 内部控件在解析 iconCls 参数时就是把这些字符串拼到元素的 class 上然后交给 CSS 去匹配背景图。资源包里除了 CSS一般还会有一份图标清单文档。这份文档列出每个类名、对应图片文件、精灵图坐标以及实际显示效果。实际开发中这份文档比图片预览目录更实用。因为平时改需求时最常查的是“我要找个刷新的图标类名叫什么”而不是一张张翻图。2.2 样式文件层次主题 CSS、图标 CSS、扩展 CSSEasyUI 1.3.4 的样式层级可以分成三部分。主题目录下的 easyui.css 定义控件框架比如 .panel-title、.tabs-title、.datagrid-header 这些选择器。icon.css 只负责图标类比如 .icon-add、.icon-reload。项目自己做的覆盖应该单独放在扩展 CSS 中而不是直接改主题文件。这里有一条很关键的习惯不要改官方 easyui.css。很多同事一上来就钻进去找到 .panel-title把字号从 12px 改成 14px改完当时痛快后面升级主题或者要对比官方样式时所有改动全部被覆盖而且根本想不起来改过哪里。正确做法是在资源包里的 custom 目录新建一个 easyui.extend.css只写覆盖规则最后引入。这样主题原文件保持干净你自己的覆盖逻辑也一目了然。文件作用使用建议themes/xxx/easyui.css控件布局、面板、表格、菜单等核心样式不建议直接改themes/xxx/icon.css图标类名与图片绑定可追加自定义类少动原有类custom/easyui.extend.css项目级覆盖主题变量按需维护作为业务层唯一样式出口这个分层结构能让资源包保持一个稳定基线。原文件一旦改动后期排查样式问题就会变成黑匣子不知道哪些规则是主题自带、哪些是被人为调整过的。2.3 引用顺序与常见组合页面里引用 EasyUI 静态资源时顺序是固定的。样式表先引主题的 easyui.css再引 icon.css最后引自己的扩展 CSS。脚本部分先引 jQuery再引 EasyUI 核心 JS。下面是标准模板link relstylesheet hrefthemes/default/easyui.css link relstylesheet hrefthemes/default/icon.css link relstylesheet hrefcustom/easyui.extend.css script srceasyui/jquery.min.js/script script srceasyui/jquery.easyui.min.js/script逻辑上link 的顺序决定了层叠规则的优先关系。easyui.css 在最前面icon.css 随后是因为 icon.css 里的部分规则依赖主题里的公共样式定义。扩展 CSS 必须是最后一个样式表否则它写的覆盖规则会被后面加载的 easyui.css 重新盖回去。参数上要注意的是路径。上面写的 href 是相对当前页面的如果项目部署在子目录或者使用了模板引擎最好用绝对路径或者动态生成的基础路径。JavaScript 的引入顺序同样敏感jQuery 必须在前因为 EasyUI 在初始化时会扫描页面元素并读取 jQuery 的 DOM 操作能力。如果顺序反了控件不会正常渲染但控制台不一定报错看起来就像样式完全失效。3. 把资源用起来icon 扩展与主题覆盖实战资源包自带的图标类覆盖了绝大多数后台场景但每个项目总有几个业务专属图标。文章这部分不讲空理论直接说怎么在现有资源基础上扩展和覆盖。3.1 在 icon.css 中追加自定义图标类业务里最常用的一招是在不破坏默认结构的前提下追加自定义图标。做法不是去修改 easyui.css而是在 icon.css 末尾或者扩展 CSS 里追加新类。下面是给“报表中心”加图标的典型写法.icon-app-report { background-image: url(images/icons/app-report.png) !important; background-position: 0 0; }逻辑上自定义类要放在主题 icon.css 之后才会生效否则会被同名的默认样式覆盖。background-image 加了 !important是因为 EasyUI 部分控件会生成内联样式如果不加背景图片可能被内联规则盖掉。background-position 默认是 0 0恰好适用于单张图片如果你拿到的是精灵图就需要参考资源包里的坐标对照表调整。参数方面url 的路径是相对于当前 CSS 文件的不是相对于页面。CSS 文件在 themes/default/icon.css图片放在 themes/default/images/icons/ 下那么路径就写 images/icons/app-report.png。如果项目使用 CDN 分离最好改成完整 CDN 地址省得部署到不同环境时反复调路径。3.2 在按钮、菜单、树节点中正确传 iconClsEasyUI 1.3.4 统一通过 iconCls 参数传图标类名。最常见的场景是操作按钮a href# classeasyui-linkbutton>div idmm classeasyui-menu div>treeData [{ id: 1, text: 报表中心, iconCls: icon-app-report }];这三处使用方式的参数名完全一致iconCls。这个参数最终会被拼接到元素 class 上。经常有人误写成 iconClass 或者 className结果就是图标区域空白而且不报错。遇到这种情况先打开调试工具看目标元素上有没有生成这个 class十有八九是写错了参数名。资源包里的资源可以用在 datagrid 工具栏、window 弹窗、layout 折叠区等控件上。这些控件内部的初始化方式不一样但外层的 iconCls 约定是通用的参数传错最常见的症状是功能按钮没有图标但按钮文字还在不至于导致页面崩溃。3.3 用自定义 CSS 重写主题变量1.3.4 的主题样式变量不在 CSS 变量里而是直接写在各个选择器下。比如面板标题字号、表头背景色、菜单项高度。资源包不需要你逐行改主题而是提供一份可维护的扩展空模板。实际覆盖的写法一般带上下文前缀body .panel-title { font-size: 14px; color: #333; } body .tabs-title { font-size: 13px; }关键点是 body 前缀。它把选择器优先级抬高避免被主题 CSS 里的同优先级规则压下去。EasyUI 控件内部的 DOM 层级不深用 body 开头的后代选择器已经够用不需要写更多层限制。这样既不会误伤全局其他元素也能确保覆盖规则生效。项目里最常见的覆盖目标是标题字号、按钮圆角、表头背景、内边距。覆盖越多后续换主题时手尾越麻烦所以资源包里的清单文档会记录默认值。修改前先看一眼默认值再决定是覆盖还是直接换主题能省很多回头调试的时间。4. 避坑指南EasyUI 1.3.4 图标样式不生效的 5 个排查点老项目里跑 EasyUI 1.3.4最耗时的往往不是写功能而是排样式问题。下面这 5 个坑是我处理资源包引用时反复遇到的按现象、原因、解决三个方面描述。4.1 图标不显示、背景图失效路径和缓存问题第一坑图标不显示按钮上是空白或小方块。现象按钮、菜单、树节点设置了 iconCls但图片没有渲染。原因icon.css 里的背景图路径是相对 CSS 文件的位置如果 projects 部署在子目录或者把 icon.css 单独挪了目录相对路径就对不上。解决打开 Network 面板看图片请求是不是 404。若是把背景图路径改成绝对路径或者保持 themes 目录整体移动不要单独挪 icon.css。资源包的文件结构只要不动通常不会出现这个坑但不少人喜欢把 easyui.css 和 icon.css 单独抽出来放到自己的 css 目录里结果图片路径全部失效。第二坑图标显示了但明显错位、拉伸、挤成一团。现象图标被切了一半或者按钮高度被撑破。原因背景图使用的是雪碧图但类里没有合适的 background-position或者图片尺寸和默认图标尺寸不一致。解决参考资源包里的坐标表把 background-position 补上去。如果是自己切的图不要用超过 16x16 的图片直接挂上去避免按钮布局被撑乱。第三坑改了自定义图标页面却不更新。现象CSS 和图片都替换了浏览器里看到的还是旧图标。原因浏览器缓存了旧的 CSS 文件和 PNG 图片。这是老系统里的高频踩坑点。解决先做一次硬刷新Windows 下 CtrlF5Mac 下 CmdShiftR。如果还不行给引用链接加版本号后缀比如 icon.css?v20250115。版本号参数不值得加到资源包内部互相引用的相对路径上否则可能出现主题内引用不一致。4.2 主题切换失败、控件样式被覆盖加载顺序与选择器优先级第四坑点击切换主题后控件颜色没变化。现象JavaScript 把 link 的 href 换成了另一个主题但页面上的面板、按钮、表格还是旧主题。原因EasyUI 控件初始化时已经读取了样式部分属性写到了元素的内联样式里单纯换 CSS 文件不会清掉这些内联值。解决切换主题后手动刷新布局调用一次整容器重绘代码大致是这样// 切换主题后强制重绘已初始化的控件 $(#mainBox).layout(resize); $(#dataGrid).datagrid(reload);这段逻辑的本质是让 EasyUI 重新读取当前主题样式。layout 的 resize 方法会更新面板尺寸datagrid 的 reload 方法会重新渲染表格行。参数上#mainBox 和 #dataGrid 需要改成实际页面里的容器 id如果页面里还有其他控件比如 window、tree也需要对应调用刷新方法。同时还要检查主题 CSS 的引入顺序在 icon.css 之前加载否则图标背景图规则可能被主题规则覆盖。第五坑项目公共 CSS 把 EasyUI 控件样式覆盖了。现象按钮、输入框、标签页全部变成项目里公共样式定义的样子EasyUI 自带风格基本失效。原因公共 CSS 里常写全局选择器比如 .panel、.window、input这些选择器优先级高于 EasyUI 的类选择器。解决扩展 CSS 里给选择器加 body 前缀必要时使用 !important。但 !important 要克制只在确实拿内联样式没办法的时候用否则后面调样式时苦不堪言。还有一个隐藏原因页面里重复引入了两套主题的 easyui.css后加载的那套会把先加载的覆盖掉。排查时直接看页面源码里的 link 列表注意不要让 default 和 gray 两套主题同时出现在同一个页面上。5. 验证资源完整性图标枚举与基线比对拿到图标和样式资源包后不要急着合并到业务代码先验证一遍完整性。我的做法分两步先在控制台枚举页面实际用到的图标类再和资源包里的图标清单做 diff。5.1 快速枚举页面图标类打开 Chrome DevTools 或 Firefox 控制台在已经加载 EasyUI 控件的页面里直接跑下面这段脚本// 找出所有含 icon- 前缀的类名 const usedIcons new Set(); document.querySelectorAll([class*icon-]).forEach(el { // 只收集以 icon- 开头的类过滤掉其他工具类 el.classList.forEach(cls { if (cls.startsWith(icon-)) usedIcons.add(cls); }); }); console.log([...usedIcons].sort().join(\n));这段脚本不依赖任何框架直接把当前页面所有元素上以 icon- 开头的类收集起来。注意它只捕捉渲染后已经存在于 DOM 里的图标类动态创建且还未渲染到页面上的控件不会被统计到。如果页面里全是 EasyUI 动态渲染的内容先手动展开菜单、打开弹窗再执行脚本这样结果更完整。5.2 与资源包清单做 diff把页面枚举结果和资源包里的 icon.css 定义做对比。在终端里用 grep 拉出所有类名grep -oE \.[a-z]-[a-z-] themes/default/icon.css | sort -u defined_icons.txt这个命令的作用是提取 icon.css 中所有以点和字母开头、段与段之间用中划线连接的类名。把上一步控制台打印出来的类名存到 used_icons.txt然后用 diff 对比。diff 结果为空的说明页面用到的图标都在资源包里有兜底定义有差异的优先检查不在定义清单里的图标类是不是拼写错误或者自定义类没有被正确加载。最后做一次视觉基线对比。我会把资源包自带的 demo 页面和改造后页面并排截图重点看按钮圆角、面板标题、表头背景这三处。这三处最容易受扩展 CSS 影响只要它们对齐整套资源的继承逻辑基本没有坏。从那以后我每次接手 EasyUI 老项目都强制先过一遍图标枚举和 diff再谈改样式。这套验证流程救了我好几次希望帮到你。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
