首页 > 其他分享 >记录6年时间3套easyui前端框架主题皮肤美化的ui设计历程

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

时间:2023-06-02 11:05:07浏览次数:59  
标签:easyui 样式 主题 JS ui 组件 美化 页面

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

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

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

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

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

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

2023年6月初又新增渐变色主题并且对原有蓝色主题进行调整优化。

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

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

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

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

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

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

主题的演示视频请移步:

 easyui主题皮肤演示


登录页

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

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

系统主页(仪表盘)

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

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

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

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


Easyui组件(电脑端)

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

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

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

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

Datagrid数据表格

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

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


Form表单

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

记录6年时间3套easyui前端框架主题皮肤美化的ui设计历程_后台模版_10

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

记录6年时间3套easyui前端框架主题皮肤美化的ui设计历程_后台模版_11

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

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

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

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

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


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

Layout布局

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

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

Layui响应式布局

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

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

Iconfont阿里图标

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

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

Timeline时间线

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

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

Animate动画动效库

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

记录6年时间3套easyui前端框架主题皮肤美化的ui设计历程_后台模版_19

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

示例页1:用户信息页

layui布局方式配合panle和tabs组件很方便就可以实现此左右布局的页面效果。

记录6年时间3套easyui前端框架主题皮肤美化的ui设计历程_后台模版_20


示例页2:文章内容页

基本的文章内容页展示效果,顶部增加面包屑导航功能。

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


示例页4:404页/数据为空页

找不到页面的404提示页及项目/数据为空页面示例。

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

标签:easyui,样式,主题,JS,ui,组件,美化,页面
From: https://blog.51cto.com/u_16148357/6400770

相关文章

  • 基于nerdctl+buildkitd+containerd实现镜像构建
    1、容器技术简介容器技术除了的docker之外,还有coreOS的rkt、google的gvisor、以及docker开源的containerd、redhat的podman、阿⾥的pouch等,为了保证容器⽣态的标准性和健康可持续发展,包括Linux基⾦会、Docker、微软、红帽、⾕歌和IBM等公司在2015年6⽉共同成⽴了⼀个叫opencont......
  • 一款好看的Python下的GUI库:dearpygui
    说明之前写测试上位机都是用PyQT,可以拖拽控件实现所见即所得的设计效果。但是编译后的EXE体积较大、响应较慢,经常卡死,而且界面想要设计好看点需要了解其他界面设计知识。后面看到了dearpygui库,感觉实现的界面很现代。它运行很流畅,效果也很棒。dearpygui入门资源以下是可以......
  • element ui 预览图片的时候滚动鼠标放大缩小, 重新打开的时候恢复原来大小
    <template><div><el-button@click="openPreview">预览图片</el-button><el-dialog:visible.sync="dialogVisible":close-on-click-modal="false":before-close="resetPreview"><im......
  • 如何正确在多线程环境下更新UI_使用Platform的runLater方法
    如何正确在多线程环境下更新UI_使用Platform的runLater方法许多UI控件都提供了各种修改方法,比如我们可以修改Label上面的文本,进度条ProgressBar的进度。但我们必须保证修改UI的线程是JavaFX的UI线程,如果不是则会出现异常。那么我们如何在另一个线程中修改JavaFX的UI呢?......
  • 阿里Druid数据源,程序启动或日志记录报错 load filter error, filter not found : logb
      Druid支持配置多种Filter,配置信息保存在druid-xxx.jar!/META-INF/druid-filter.properties下面,具体如下:druid.filters.default=com.alibaba.druid.filter.stat.StatFilterdruid.filters.stat=com.alibaba.druid.filter.stat.StatFilterdruid.filters.mergeStat=com.a......
  • Element-ui中 选择器(select)多选下拉框实现全选功能
    Element-ui中选择器(select)多选下拉框实现全选功能需求(产品整活):需要下拉时候可以一键全选父组件运用<template><div><MultipleSelect:filterable="false":selectOptions="selectOptions"//数据集合:mulSelectLoading="mulSelectLoad......
  • Burp Suite添加https证书——让其可以嗅探https的数据包,本质上就是将BP自己做为https
    如何给软件BurpSuite添加https证书?BurpSuite是一款强大的安全测试工具,可以用来设置代理,抓取http数据包,如果添加了https证书,就可以抓取https数据包。这边经验就告诉你,如何给软件BurpSuite添加https证书。工具/原料 联网的电脑一台BurpSuite软件firefox浏览器,并安装proxyswitch......
  • Swift UI @Binding 代码实现
    importSwiftUIfinalclassBox<T>:ObservableObject{//这个注解不加,那就玩死了也不会更新视图@Publishedvarval:Tinit(val:T){self.val=val}}structStarRating:View{//个人理解类似Java的Spring容器管理,用更大......
  • python selenium框架解决ip代理框不能自动化登录,解决pyautogui开不了多线程问题
    有时候我们使用python自动化框架的时候,打开一个网页的时候,它会出现出线这一种登录框,我们f12检查不了,用开发者工具强制检查里面没有任何属性.那这时候我们就可以用到python第三方库:pyautoguiPyAutoGUI:是一个Python库,可用于自动化GUI(图形用户界面)程序的任务。它可以让Pytho......
  • layui 日期控件问题
    日期控件正常可弹出,点击返回,设置页面隐藏后,再显示,日期控件不弹出。//返回列表$('#backList').on('click',function(){$('#xxx').hide();$('#yyyy').show();$(window).trigger('resize');});日期控件渲染的时候需要清除lay-key......