EXT.NET复杂布局(四)——系统首页设计(上)
来源:互联网 发布:开淘宝店的要求 编辑:程序博客网 时间:2024/06/07 06:23
本篇主要讲述页面设计与效果,下篇将讲述编码并提供源码下载。
系统首页设计往往是个难点,因为往往要考虑以下因素:
- 重要通知
- 系统功能菜单
- 快捷操作
- 日常维护工作(比如待办事项、已办事项等等)
- 用户信息(比如公司、部门、组织机构)
- 系统信息(意见反馈、帮助等)
- 联系沟通
- 等等
又要兼顾美观得体(丑了客户不愿意用,更别说钱了),方便实用,怎么从有限的空间里显示更多的功能(阵地战),往往弄得抓耳搔头,大费脑细胞。下面就给出我的方案。
页面效果
我申明下,我不是专业的前端工程师,我就是一打杂的(啥都搞下),所以不要期望过高,如果还过得去,请点推荐。不多说了,上图:
从图中可以看出,首页分4块区域(四大板块):
- 顶部面板——LOGO、用户信息、帮助、反馈、通知等。
- 左侧面板——组织机构(通常放功能菜单)。
- 右侧面板——联系人或其他信息。
- 中央区域——工作台。主要用于日常工作维护以及快捷操作。
顶部面包和右侧面板没啥好说的。接下来就说说功能吧。
左侧面板
左侧面板其实是相当重要的一块,在平常系统设计中,往往把功能菜单放在左侧。这里类似。不仅支持分组折叠,还支持无限极子菜单,美观而灵活。
当点击子节点,会显示在Tab页中。
这样,用户可以方便的实现操作。
中央区域
中央区域主要用于日常工作维护以及快捷操作。当然快捷操作你也可以放在顶部面板。
这个面板主要包括待处理事务、一般事务、通知、部门讨论区、部门文档等内容,当然我这是举例。
整个工作台布局也是采用折叠面板,不过当展开某个面板时,会刷新数据。默认加载,并不需要加载所有数据。
就拿待处理事务来说:
通过工具栏按钮,可以方便对事务进行操作(别忘了判断权限)。如点击退回操作:
通过数据行中的操作列按钮,可以方便查看表单内容,当表单关闭时,刷新工作台。
总之,只会显示一个操作面板。
最后
整个页面是自适应的,会随着浏览窗口大小自适应,如:
点子页面弹出表单可以最大化,如:
当你点击表单里面的提交按钮(假设存在),提交完后,可以关闭表单,父页面也可以触发操作,如关闭弹出的表单时:
先写到这里吧,下篇再细谈。到时奉上DEMO。
由于加群的人太多,EXT.NET群已满。由于现在是业余弄弄EXT.NET,所以本人也不会过多与大家交流EXT.NET,还写一篇,作为结尾好了。
这几天有空的话,尽量完善这个DEMO吧。
- EXT.NET复杂布局(四)——系统首页设计(上)
- EXT.NET复杂布局(四)——系统首页设计(下)
- EXT.NET复杂布局(一)——工作台
- EXT.NET复杂布局(二)——报表
- EXT.NET复杂布局
- Ext JS 4官方指南(四)—— 基本概念之Ext JS 容器与布局
- React Native布局实践:开发京东客户端首页(四)——首页功能按钮及控件封装
- EXT.NET高效开发(四)——实用技巧
- 关于系统首页绘制问题(ext布局+c#后台添加数据)经html输出流输出响应客户端
- Arcgis Server javascript— EXT布局设计
- RecycleView 实现复杂首页布局
- .NET学习笔记(四) ------类型设计(上)
- Eeid—ligerUI学习(1)[首页布局]
- Ext 布局(layout)
- 首页数据分页【springboot mybatis个人博客系统(四)】
- <div+css页面布局课堂笔记>11---页面布局网站首页设计实例__终极版(仿csdn首页)
- 复杂布局——面板(JPanel)组件的使用
- RecyclerView实现复杂首页(条目)布局
- EXT.NET高效开发(四)——实用技巧
- map的使用方法
- git 删除远程分支
- Windows CE 驱动简介
- 85、正确修改 sysman 用户的密码
- EXT.NET复杂布局(四)——系统首页设计(上)
- Microsoft Visual SourceSafe2005基本操作与协作规范
- EXT.NET复杂布局(四)——系统首页设计(下)
- common port number
- Java压缩/解压ZIP
- 86、oracle表分析 示例
- 连通区域合并问题
- 浅析CUDA编译流程与配置方法
- 由几行代码浅析C#的方法参数传递