博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
EXT.NET复杂布局(四)——系统首页设计(上)
阅读量:5963 次
发布时间:2019-06-19

本文共 1022 字,大约阅读时间需要 3 分钟。

很久没有发帖了,很是惭愧,因此给各位使用EXT.NET的朋友献上一份礼物。

本篇主要讲述页面设计与效果,下篇将讲述编码并提供源码下载。

系统首页设计往往是个难点,因为往往要考虑以下因素:

  • 重要通知
  • 系统功能菜单
  • 快捷操作
  • 日常维护工作(比如待办事项、已办事项等等)
  • 用户信息(比如公司、部门、组织机构)
  • 系统信息(意见反馈、帮助等)
  • 联系沟通
  • 等等

又要兼顾美观得体(丑了客户不愿意用,更别说钱了),方便实用,怎么从有限的空间里显示更多的功能(阵地战),往往弄得抓耳搔头,大费脑细胞。下面就给出我的方案。

页面效果

我申明下,我不是专业的前端工程师,我就是一打杂的(啥都搞下),所以不要期望过高,如果还过得去,请点推荐。不多说了,上图:

从图中可以看出,首页分4块区域(四大板块):

  1. 顶部面板——LOGO、用户信息、帮助、反馈、通知等。
  2. 左侧面板——组织机构(通常放功能菜单)。
  3. 右侧面板——联系人或其他信息。
  4. 中央区域——工作台。主要用于日常工作维护以及快捷操作。

顶部面包和右侧面板没啥好说的。接下来就说说功能吧。

左侧面板

左侧面板其实是相当重要的一块,在平常系统设计中,往往把功能菜单放在左侧。这里类似。不仅支持分组折叠,还支持无限极子菜单,美观而灵活。

当点击子节点,会显示在Tab页中。

这样,用户可以方便的实现操作。

中央区域

中央区域主要用于日常工作维护以及快捷操作。当然快捷操作你也可以放在顶部面板。

这个面板主要包括待处理事务、一般事务、通知、部门讨论区、部门文档等内容,当然我这是举例。

整个工作台布局也是采用折叠面板,不过当展开某个面板时,会刷新数据。默认加载,并不需要加载所有数据。

就拿待处理事务来说:

通过工具栏按钮,可以方便对事务进行操作(别忘了判断权限)。如点击退回操作:

 

通过数据行中的操作列按钮,可以方便查看表单内容,当表单关闭时,刷新工作台。

总之,只会显示一个操作面板。

最后

 

 

 

 

 

 

 

 

整个页面是自适应的,会随着浏览窗口大小自适应,如:

点子页面弹出表单可以最大化,如:

当你点击表单里面的提交按钮(假设存在),提交完后,可以关闭表单,父页面也可以触发操作,如关闭弹出的表单时:

先写到这里吧,下篇再细谈。到时奉上DEMO。

由于加群的人太多,EXT.NET群已满。由于现在是业余弄弄EXT.NET,所以本人也不会过多与大家交流EXT.NET,还写一篇,作为结尾好了。

这几天有空的话,尽量完善这个DEMO吧。

转载地址:http://mcjax.baihongyu.com/

你可能感兴趣的文章
各型号英特尔CUP的功率
查看>>
scanf()中的%c 不能正常输入的问题
查看>>
常见排序算法及对应的时间复杂度和空间复杂度
查看>>
业界 | 在德州叫一辆自动驾驶车,Drive.ai安排了7辆无人车展开真实试验
查看>>
三家公司在SD-WAN方面的新动作
查看>>
C#在PDF中如何以不同颜色高亮文本
查看>>
在同一页面显示多个JavaScript统计图表
查看>>
Mac电脑Tomcat下载及安装(详细)MAC在Eclipse里配置tomcat
查看>>
多线程之-----------定时器
查看>>
C#语法——反射,架构师的入门基础。
查看>>
Beego Models 之 一
查看>>
代码生成工具Database2Sharp中增加视图的代码生成以及主从表界面生成功能
查看>>
Kubernetes部署的最佳安全实践
查看>>
理解C语言——从小菜到大神的晋级之路(8)——数组、指针和字符串
查看>>
Windows Shellcode学习笔记——shellcode在栈溢出中的利用与优化
查看>>
关于多线程中使用SendMessage
查看>>
【云栖大会】阿里云移动云Apsara Mobile重磅发布 推出Cloud Native App全新研发范式...
查看>>
【PMP】Head First PMP 学习笔记 第九章 人力资源管理
查看>>
2015年末必备前端工具集
查看>>
【Solidity】8. 杂项 - 深入理解Solidity
查看>>