记录6年时间3套easyui前端框架主题皮肤美化的设计历程

news2024/11/18 9:40:07

沉寂了许久,是该发点东西了,要不然2023年都要过去一半了

 第一次接触Easyui前端框架,还是在2016年的时候,有个美化easyui界面的需求,自己是设计师,前端知识也只会最基本的html和css样式,JS只能网上找例子来套用。于是就找前端的朋友一起合作,我设计系统界面的UI,然后前端根据设计,在easyui主题的基础上实现我的设计,于是第一版easyui主题的美化就这样诞生了,就是下图的样子了,相信很多人都见到过:

easyui主题皮肤美化
2016年设计制作的easyui主题皮肤

 

但这个版本由于修改了easyui的部分JS,后期easyui版本升级会影响到主题皮肤的使用,并且很多小的细节没有处理到位,并且是在easyui1.4.5版本上开发的,挺久远了,现在easyui都升级到1.10.X了,自己JS几乎不会,看到不满意的地方也不好修改,只能放弃对它的维护。

时间来到了2019年,总结了上一个版本的经验,加上自己JS不会写,就考虑是否能在只修改css样式的基础上来对easyui主题进行美化,这样只需要替换掉项目里的css文件就可以实现对已有项目的界面美化,并且不影响easyui核心JS的升级,事实证明这样确实很方便,很多用easyui做的项目,用这个方法来更换美化界面,操作起来很简单也很方便,2019版的easyui主题皮肤如下图:

easyui主题皮肤美化-2019版
2019年设计制作的easyui主题皮肤

这一版一开始是设计的酷黑风格,后来发现不怎么实用,几乎没有项目会用到黑色的主题,于是就制作了蓝色、蓝黑、仿layui风格的皮肤,并且都是只修改了easyui.css这个文件,用到项目中时最多也就是样式的小问题,不会让系统产生bug。不满意的地方就是还是不够完美,灰色用的有点深了,数据表格等几个组件的样式显示有点不太完美,用easyui默认的组件来排版布局复杂页面还是有点麻烦的,还要自己去写一些css样式结合起来排版,目前这套主题依然在维护,后面再把它完善一下吧,让它更漂亮、更实用。

有了前2套easyui皮肤设计的经验积累和对easyui框架的熟悉,年初的时候就想要再做一套更漂亮更好用的主题,但由于自己比较懒,拖了好久才开始,工作比较忙,有时间就做一点,前前后后搞了2个多月才差不多搞好,赶紧发到这里来“炫耀”一下,大家多提宝贵意见,注意:涉及JS的最好别提,因为我不会JS。

赶紧放出效果图大家一起鉴赏下吧,虽然风格并不是很流行,但相比之前的版本,也进步了不少,因为根本没用PS做效果图,变修改样式边调整,所以可能还不算太好看,大家凑合一下吧:

2023年最新设计的easyui前端框架主题皮肤
2023年最新设计的easyui前端框架主题皮肤

 

我在Easyui框架metro主题基础上修改的,对全部电脑端组件(手机端未做修改)进行了整体风格的设计美化,只对相关CSS样式属性进行修改,Easyui核心js均未改动。metro主题看起来还是很干净清爽的,稍微改改弄弄就挺好看了。

这次主题皮肤制作由于对easyui的样式更了解,改动的效果也更好了,突然发现easyu默认的样式写的挺不错的,很多地方都支持修改,总有办法或途径来实现自己脑子里的想法,看来写样式的老外还是很牛的。 

主题的演示视频请移步: easyui主题皮肤演示icon-default.png?t=N3I4https://www.uimaker.com/easyui/


登录页

加了个JS的背景特效,效果还不错哈哈~

easyui主题-登录页设计
登录页

系统主页(仪表盘)

 还是采用了最普遍的上左右布局模式,下个版本尝试左右布局,或者上下布局。左侧菜单采用Sidemenu侧栏菜单组件,点击菜单会在右侧弹出对应Tab页,Tab页切换时,左侧菜单自动进行关联切换。用到了ECharts统计图表,当然色彩也是专门调整搭配的。

easyui主题皮肤美化-系统主页仪表盘
系统主页仪表盘

左侧菜单缩进/右侧Tab页右键菜单: 

easyui主题皮肤美化-菜单缩进
左侧缩进/tab页菜单

 

Easyui组件(电脑端)

最最重要的就是easyui默认的51个组件了,调整起来也是相当花时间和精力,目的就是能和整体风格都搭配起来,这样在做项目时做起页面来就能效果提高,也不用花太多心思去考虑好看不好看的问题了,直接拖过来就可以用,还都挺搭配的呢:),并且还加入了一些辅助元素:Loadding加载、徽章、提示区块、分割线、面包屑导航、时间线,是不是很用心了haha~~。

easyui主题皮肤美化-组件样式
组件样式

 只放了部分的组件展示,其实所有的组件样式都测试过了,确保不会出现错位,不搭配等问题,下面就是一些组件的美化过的样子了:

easyui主题皮肤美化-组件
部分组件样式

Datagrid数据表格

数据表格用到的地方最多,样式也最不好调整,弄的复杂了、花哨了还有可能影响数据加载速度,在保证易读、可读、不产生视觉疲劳的前提下进行样式美化,,可与多种配色风格搭配,整体视觉效果和谐统一。

easyui主题皮肤美化-数据表格组件
Datagrid数据表格组件

Form表单

表单用到的地方太多了,而且还不好排版,动不动就乱套了,怎么排都感觉不好看,确实让人很头疼,easyui表单用到的一些组件,把它们的样式都统一起来,弄在一起看起来效果还不错呢!~

easyui主题皮肤美化-表单页
表单页设计

 

放一个整体的效果看看,感受一下,是不是还挺整齐、清爽的。

2023年最新设计的easyui前端框架主题皮肤-表单
From表单页排版

window窗口/Diglog对话框/Messages消息

窗口、对话框、消息默认弹窗用到的场景也不少,稍微美化一下也挺好看!默认有好几种颜色搭配呢,不过都不是很好看,稍微调整一下,就完美了 。

2023年最新设计的easyui前端框架主题皮肤-窗口
window窗口/Diglog对话框/Messages消息

以下为window窗口Diglog对话框的页面效果:

easyui主题皮肤美化-窗口
window窗口组件

 

2023年最新设计的easyui前端框架主题皮肤-对话框
Diglog对话框组件

Layout布局

Easyui默认的layout布局做整体排版还不错的,比如说左右布局,以及内嵌到panel里面进行布局,不过用起来并不是很顺手,有些样式还得自己去加一些上去才可以。

easyui主题皮肤美化-layout布局
layout布局组件

Layui响应式布局

这块就牛了,我投机取巧引入了layui的响应式布局,纯css控制,可以很方便、快捷的创建任何你想要的页面排版,直接调用对应的class就可以,配合panel等组件使用,再也不用为页面排版布局烦恼啦!用它来排版复杂页面,真的是超级好用!!!

2023年最新设计的easyui前端框架主题皮肤-layui响应式布局
layui响应式布局

 

Iconfont阿里图标

iconfont字体图标大家都用过吧,非常的好用,拿它来替换掉easyui默认的一些不是很好看的图标,看起来是相当的舒服、顺眼呢~


 

2023年最新设计的easyui前端框架主题皮肤-iconfont字体图标
iconfont字体图标

 

Timeline时间线

是不是有点眼熟,对了就是layui的东西,本人也喜欢layui框架,拿来改改用在这里还不错,大家不要鄙视我,最起码加入了我一丢丢的想法~~

2023年最新设计的easyui前端框架主题皮肤-时间线
时间线

 

Animate动画动效库

找了一堆好玩的css3动画放到里面来,可以直接调用,做点小动画也不错哦!

easyui主题皮肤美化-动画动效库
动画动效库

 

下面就是做了几个页面,就不详细介绍了,大家凑合看看吧:

2023年最新设计的easyui前端框架主题皮肤-用户信息页
用户信息页

easyui主题皮肤美化-文章内容页
文章内容页
easyui主题皮肤美化-404页/数据为空页
404页/数据为空页

2023年最新设计的easyui前端框架主题皮肤-抽屉组件
抽屉组件

 总算要结尾了,看到这里的朋友听我说谢谢你,因为有你我才有动力继续做下去,虽然很多人说easyui过时了,easyui太丑了,easyui不如xxx,但还是有很多项目在使用它,说不定哪天easyui就换一个更好看的样子来到大家面前呢~期待吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/463283.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

智慧班牌源码,使用springboot框架Java+vue2开发,二次开发方便快捷

智慧校园云平台电子班牌系统源码 智慧校园平台电子班牌系统源码在大数据平台下,对应用系统进行统一,以数据互联软硬结合的特点应用在校园,实现对校园、班级、教师、学生的管理。 智慧校园云平台电子班牌系统源码,使用springboot…

论文笔记:Map-Matching for low-sampling-rate GPS trajectories(ST-matching)

ACM-GIS 2019 1 Intro 将GPS数据和地图路网数据匹配提出全局地图匹配算法ST-matching(类似于HMM的思路) 考虑了道路网络的空间几何和拓扑结构 如果不考虑拓扑关系,直接进行matching的话,由于GPS信号的不准,可能轨迹会…

【Java 数据结构】二叉搜索树的实现

🎉🎉🎉点进来你就是我的人了 博主主页:🙈🙈🙈戳一戳,欢迎大佬指点!人生格言:当你的才华撑不起你的野心的时候,你就应该静下心来学习! 欢迎志同道合的朋友一起加油喔🦾&am…

怎么将webm格式转换成mp4,3招轻松学

怎么将webm格式转换成mp4?相对于已经广为人知的MP4,还有许多人对于WebM这种视频格式不太熟悉。WebM是一种免费开源的媒体文件格式。虽然Web.目前应用范围越来越广泛,但大家还是更习惯使用MP4,因为mp4是目前最为流行的视频文件格式…

【MySQL】MES中,发货计划取数逻辑

系列文章 C#底层库–MySQLBuilder脚本构建类(select、insert、update、in、带条件的SQL自动生成) 本文链接:https://blog.csdn.net/youcheng_ge/article/details/129179216 C#底层库–MySQL数据库操作辅助类(推荐阅读&#xff0…

TryHackMe-CMSpit(boot2root)

CMSpit 你已确定 Web 服务器上安装的 CMS 存在多个漏洞,允许攻击者枚举用户并更改帐户密码。 您的任务是利用这些漏洞并破坏 Web 服务器。 端口扫扫描 循例nmap Web枚举 进80 很明显,cms就是Cockpit, 版本通过查看源代码的js版本可以得知是0.11.1 se…

FPGA/Verilog HDL/AC620零基础入门学习——第一个项目按键控制LED

介绍 最近要考试了,所以我赶紧补习FPGA,我们用的是小梅哥的AC620开发板,软件是Quartus。推荐看这个视频教程:零基础轻松学习FPGA,小梅哥FPGA设计思想与验证方法视频教程 设计步骤 设计定义 用按键控制LED灯的亮灭就…

YOLOv7如何提高目标检测的速度和精度,基于优化算法提高目标检测速度

目录 一、学习率调度二、权重衰减和正则化三、梯度累积和分布式训练1、梯度累积2、分布式训练 四、自适应梯度裁剪 大家好,我是哪吒。 上一篇介绍了YOLOv7如何提高目标检测的速度和精度,基于模型结构提高目标检测速度,本篇介绍一下基于优化算…

xcode历史版本下载

一、背景 较早之前做过一个项目,当时使用swift 3.x开发。 项目结束后就没再有新需求与更新。 但最近呢需要对项目的某些功能进行调整,项目又重新被拾了起来。 我们知道现在的swift 版本已经到了 5.x, 相应的语法上较 3.x版本也有了不小的变化…

从2-3-4树到红黑树原理分析以及C++实现红黑树建树

总结规律: 1、2-3-4树:新增元素2节点合并(节点中只有1个元素)3节点(节点中有2个元素) 红黑树:新增一个红色节点黑色父亲节点上黑下红(2节点---------------不要调整&#…

上班族如何安排时间提高工作效率?

对于上班族来说,合理安排时间可以兼顾生活和工作,不仅能够减少加班次数,还可以提高工作效率,减少工作中的负面情绪。但是有不少小伙伴表示,自己不知道如何安排时间从而提高工作效率,这应该怎么办呢&#xf…

张勇:阿里云是一家云计算产品公司,要坚定走向“产品被集成”

4月26日,在2023阿里云合作伙伴大会上,阿里巴巴董事会主席兼CEO、阿里云智能CEO张勇表示,阿里云的核心定位是一家云计算产品公司,生态是阿里云的根基。让被集成说到做到的核心,是要坚定走向“产品被集成”。 张勇表示&a…

小米13 Ultra:携光前行,追求每一束光的精确还原

“光,是影像的原点”,一切色彩、影调都在于光。我们目之所及的大千世界,皆被光与影一笔一划细细勾勒,为“视”界晕染上或鲜明、或复古、或反差、或梦幻的色调。我们用“光”去描绘、定义“影像”,让一切平凡的事物&…

Notion AI 胜于 ChatGPT ?

去年(2022年)12 月初,在社区中 OpenAI 的 ChatGPT 刚出来就火了一把,当时一度因为访问量太大导致崩溃宕机;最近(2023 年1 月底) ChatGPT 又火了,资本市场新增 ChatGPT 概念&#xff…

入局生成式AI,看好亚马逊(AMZN)中期表现

来源; 猛兽财经 作者:猛兽财经 猛兽财经获悉,由于近期亚马逊(AMZN)宣布发布多项生成式AI以及AIGC相关产品,入局全球大模型竞赛当中。中信证券发布研报看好入局生成式AI。中信证券在研报中称,亚马逊作为北美…

【Git】拉取代码/提交代码

1.从将本地代码放入远程仓库 (如果有分支的情况) [git checkout xx切换分支后 git add . 将本地所有改动文件新增 commit之后 git push(将代码全部提交)] 分支操作 #查看分支 git branch #创建分支 git branch test #切换分支 git checkout test #修改代码 #提交代码git ad…

DPDK和RDMA的区别

网络的发展好像在各方面都是滞后于计算和存储,时延方面也不例外,网络传输时延高,逐渐成为了数据中心高性能的瓶颈。因为传统两个节点间传输数据的网络路径上有大量的内存拷贝,导致网络传输效率低下,网络数据包的收发处…

MySQL——索引

目录 一、索引 1.1 索引的概念 1.2 索引的运用 1.2.1 索引的创建 1.2.2 查看表的索引 ​1.2.3 创建索引 1.2.4 删除索引 1.2.5 总结 二、索引底层的数据结构 B 树的特点 一、索引 1.1 索引的概念 当我们是使用查询语句对表中的数据进行条件查询的时候,M…

Python小姿势 - Python爬取数据的库——Scrapy

Python爬取数据的库——Scrapy 一、爬虫的基本原理 爬虫的基本原理就是模拟人的行为,使用指定的工具和方法访问网站,然后把网站上的内容抓取到本地来。 爬虫的基本步骤: 1、获取URL地址: 2、发送请求获取网页源码; 3、…

NAT网络地址转换

1.前言 随着网络设备的数量不断增长,对IPv4地址的需求也不断增加,导致可用IPv4地址空间逐渐耗尽。解决IPv4地址枯竭问题的权宜之计是分配可重复使用的各类私网地址段给企业内部或家庭使用。但是,私有地址不能在公网中路由,即私网…