沉寂了许久,是该发点东西了,要不然2023年都要过去一半了 !
第一次接触Easyui前端框架,还是在2016年的时候,有个美化easyui界面的需求,自己是设计师,前端知识也只会最基本的html和css样式,JS只能网上找例子来套用。于是就找前端的朋友一起合作,我设计系统界面的UI,然后前端根据设计,在easyui主题的基础上实现我的设计,于是第一版easyui主题的美化就这样诞生了,就是下图的样子了,相信很多人都见到过:
但这个版本由于修改了easyui的部分JS,后期easyui版本升级会影响到主题皮肤的使用,并且很多小的细节没有处理到位,并且是在easyui1.4.5版本上开发的,挺久远了,现在easyui都升级到1.10.X了,自己JS几乎不会,看到不满意的地方也不好修改,只能放弃对它的维护。
时间来到了2019年,总结了上一个版本的经验,加上自己JS不会写,就考虑是否能在只修改css样式的基础上来对easyui主题进行美化,这样只需要替换掉项目里的css文件就可以实现对已有项目的界面美化,并且不影响easyui核心JS的升级,事实证明这样确实很方便,很多用easyui做的项目,用这个方法来更换美化界面,操作起来很简单也很方便,2019版的easyui主题皮肤如下图:
2023年6月初又新增渐变色主题并且对原有蓝色主题进行调整优化。
这一版一开始是设计的酷黑风格,后来发现不怎么实用,几乎没有项目会用到黑色的主题,于是就制作了蓝色、蓝黑、仿layui风格的皮肤,并且都是只修改了easyui.css这个文件,用到项目中时最多也就是样式的小问题,不会让系统产生bug。不满意的地方就是还是不够完美,灰色用的有点深了,数据表格等几个组件的样式显示有点不太完美,用easyui默认的组件来排版布局复杂页面还是有点麻烦的,还要自己去写一些css样式结合起来排版,目前这套主题依然在维护,后面再把它完善一下吧,让它更漂亮、更实用。
有了前2套easyui皮肤设计的经验积累和对easyui框架的熟悉,年初的时候就想要再做一套更漂亮更好用的主题,但由于自己比较懒,拖了好久才开始,工作比较忙,有时间就做一点,前前后后搞了2个多月才差不多搞好,赶紧发到这里来“炫耀”一下,大家多提宝贵意见,注意:涉及JS的最好别提,因为我不会JS。
赶紧放出效果图大家一起鉴赏下吧,虽然风格并不是很流行,但相比之前的版本,也进步了不少,因为根本没用PS做效果图,变修改样式边调整,所以可能还不算太好看,大家凑合一下吧:
我在Easyui框架metro主题基础上修改的,对全部电脑端组件(手机端未做修改)进行了整体风格的设计美化,只对相关CSS样式属性进行修改,Easyui核心js均未改动。metro主题看起来还是很干净清爽的,稍微改改弄弄就挺好看了。
这次主题皮肤制作由于对easyui的样式更了解,改动的效果也更好了,突然发现easyu默认的样式写的挺不错的,很多地方都支持修改,总有办法或途径来实现自己脑子里的想法,看来写样式的老外还是很牛的。
主题的演示视频请移步:
登录页
加了个JS的背景特效,效果还不错哈哈~
系统主页(仪表盘)
还是采用了最普遍的上左右布局模式,下个版本尝试左右布局,或者上下布局。左侧菜单采用Sidemenu侧栏菜单组件,点击菜单会在右侧弹出对应Tab页,Tab页切换时,左侧菜单自动进行关联切换。用到了ECharts统计图表,当然色彩也是专门调整搭配的。
左侧菜单缩进/右侧Tab页右键菜单:
Easyui组件(电脑端)
最最重要的就是easyui默认的51个组件了,调整起来也是相当花时间和精力,目的就是能和整体风格都搭配起来,这样在做项目时做起页面来就能效果提高,也不用花太多心思去考虑好看不好看的问题了,直接拖过来就可以用,还都挺搭配的呢:),并且还加入了一些辅助元素:Loadding加载、徽章、提示区块、分割线、面包屑导航、时间线,是不是很用心了haha~~。
只放了部分的组件展示,其实所有的组件样式都测试过了,确保不会出现错位,不搭配等问题,下面就是一些组件的美化过的样子了:
Datagrid数据表格
数据表格用到的地方最多,样式也最不好调整,弄的复杂了、花哨了还有可能影响数据加载速度,在保证易读、可读、不产生视觉疲劳的前提下进行样式美化,,可与多种配色风格搭配,整体视觉效果和谐统一。
Form表单
表单用到的地方太多了,而且还不好排版,动不动就乱套了,怎么排都感觉不好看,确实让人很头疼,easyui表单用到的一些组件,把它们的样式都统一起来,弄在一起看起来效果还不错呢!~
放一个整体的效果看看,感受一下,是不是还挺整齐、清爽的。
window窗口/Diglog对话框/Messages消息
窗口、对话框、消息默认弹窗用到的场景也不少,稍微美化一下也挺好看!默认有好几种颜色搭配呢,不过都不是很好看,稍微调整一下,就完美了 。
以下为window窗口和Diglog对话框的页面效果:
Layout布局
Easyui默认的layout布局做整体排版还不错的,比如说左右布局,以及内嵌到panel里面进行布局,不过用起来并不是很顺手,有些样式还得自己去加一些上去才可以。
Layui响应式布局
这块就牛了,我投机取巧引入了layui的响应式布局,纯css控制,可以很方便、快捷的创建任何你想要的页面排版,直接调用对应的class就可以,配合panel等组件使用,再也不用为页面排版布局烦恼啦!用它来排版复杂页面,真的是超级好用!!!
Iconfont阿里图标
iconfont字体图标大家都用过吧,非常的好用,拿它来替换掉easyui默认的一些不是很好看的图标,看起来是相当的舒服、顺眼呢~
Timeline时间线
是不是有点眼熟,对了就是layui的东西,本人也喜欢layui框架,拿来改改用在这里还不错,大家不要鄙视我,最起码加入了我一丢丢的想法~~
Animate动画动效库
找了一堆好玩的css3动画放到里面来,可以直接调用,做点小动画也不错哦!
下面就是做了几个页面,就不详细介绍了,大家凑合看看吧:
示例页1:用户信息页
layui布局方式配合panle和tabs组件很方便就可以实现此左右布局的页面效果。
示例页2:文章内容页
基本的文章内容页展示效果,顶部增加面包屑导航功能。
示例页4:404页/数据为空页
找不到页面的404提示页及项目/数据为空页面示例。
标签:easyui,样式,主题,JS,ui,组件,美化,页面 From: https://blog.51cto.com/u_16148357/6400770