EXT.NET复杂布局(四)——系统首页设计(上)

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

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

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

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

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

页面效果

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

image

111

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

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

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

左侧面板

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

image

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

image

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

中央区域

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

image

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

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

就拿待处理事务来说:

image

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

image 

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

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

image

最后

 

 

 

 

 

 

 

 

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

image

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

image

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

image

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

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

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

转载于:https://www.cnblogs.com/codelove/archive/2011/12/30/2308125.html

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

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

相关文章

figma设计_在Figma中使用隔片移交设计

figma设计I was quite surprised by how much the design community resonated with the concept of spacers since I published my 自从我发表论文以来,设计界对间隔件的概念产生了多少共鸣,我感到非常惊讶。 last story. It encouraged me to think m…

axios源码中的10多个工具函数,值得一学~

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。本文来自读者Ethan01投稿…

寄充气娃娃怎么寄_我如何在5小时内寄出新设计作品集

寄充气娃娃怎么寄Over the Easter break, I challenged myself to set aside an evening rethinking the structure, content and design of my portfolio in Notion with a focus on its 在复活节假期,我挑战自己,把一个晚上放在一边,重新思…

最全 JavaScript Array 方法 详解

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。我们在日常开发中&#…

管理沟通中移情的应用_移情在设计中的重要性

管理沟通中移情的应用One of the most important aspects of any great design is the empathetic understanding of and connection to the user. If a design is ‘selfish’, as in when a product designed with the designer in mind and not the user, it will ultimatel…

网易前端进阶特训营,邀你免费入营!一举解决面试晋升难题!

网易等大厂的前端岗位一直紧缺,特别是资深级。最近一位小哥面进网易,定级P4(资深),总包60W,给大家带来真实面经要点分享。网易的要求有:1.对性能优化有较好理解,熟悉常用调试工具2.熟…

angelica类似_亲爱的当归(Angelica)是第一个让我哭泣的VR体验

angelica类似It was a night just like any other night. I finished work for the day and closed my laptop. I had dinner and after an hour, I put on my Oculus Quest headset in order to begin my VR workout.就像其他任何夜晚一样, 这 是一个夜晚。 我完成…

面试官:请手写一个带取消功能的延迟函数,axios 取消功能的原理是什么

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。本文仓库 https://githu…

facebook 面试_如何为您的Facebook产品设计面试做准备

facebook 面试重点 (Top highlight)Last month, I joined Facebook to work on Instagram DMs and as a way to pay it forward, I 上个月,我加入了Facebook,从事Instagram DM的工作,作为一种支付方式,我 offered to help anyone…

8年了,开始写点东西了

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。今天分享一位大佬的文章…

荒径 弗罗斯特_弗罗斯特庞克,颠覆性城市建设者

荒径 弗罗斯特Most gamers are familiar with Will Wright’s famous SimCity series. It created the city building genre and there have been many attempts over the years to ape it. But few developers have been bold enough to completely deconstruct the formula; …

Gitee 如何自动部署博客 Pages?推荐用这个GitHub Actions!

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。前段时间我把自己的博客…

现在流行的画原型图工具_原型资源图:8种流行原型工具的综合指南

现在流行的画原型图工具Although tools are not the most important things to learn as a UX designer, inevitably you need to use it in order to achieve your more important goals, to solve user’s problems. This article covers today’s 8 popular UX prototyping …

持续5个月,200+笔记,3千多人参与,邀请你来学源码~

注意:本文点击文末阅读原文可查看文中所有链接。我正在参加掘金年度人气作者投票活动,大家有空可以加微信群帮忙投票,感谢大家!想起今天还没发文,就开放下微信群二维码,大家扫码进群读源码和帮忙投票吧。群…

第2年,倒数第3天,1.5万票,感动!

1源码共读大家好,我是若川。众所周知。从8月份开始,我组织了源码共读活动,至今已经有5个月了,每周一期,进行到了第18期。每周坚持写源码解读文章,每天坚持答疑解惑,帮助了很多人学会看源码&…

启发式搜索给神经网络_神经科学如何支持UX启发式

启发式搜索给神经网络重点 (Top highlight)Interaction and UX designers have long known and used heuristics to guide the creation of a user-friendly interface. We know empirically that these principles work, and they make “common sense”. These heuristics th…

Django实战(1):需求分析和设计

Depot是《Agile Web Development with Rails》中的一个购物车应用。 该书中用多次迭代的方法,逐步实现购物车应用,使很多人走上了rails开发的道路。 遗憾的是Django世界中好像没有类似的指引,也许是因为pythoner 不需要具体的例子。 但是如果…

海浪 shader_海浪下的发现

海浪 shaderI’ve been playing Subnautica for over 25 hours now, and likely have at least that many more to go. The game puts you in the shoes of a crew member on the Aurora, a spaceship that suffers a catastrophic incident and plummets to the largely ocean…

最后一天,特邀小姐姐配音拉票,今日可投28票

1源码共读大家好,我是若川。最后一天,特邀小姐姐配音拉票,超级好听。众所周知。从8月份开始,我组织了源码共读活动,至今已经有5个月了,每周一期,进行到了第18期。每周坚持写源码解读文章&#x…

对数据可视化的理解_使数据可视化更容易理解

对数据可视化的理解Data is weaving its way into almost all aspects of our lives since the past decade. Our ability to store more information in smaller and smaller spaces has encouraged us to make sure we leave no information out. The ease of collecting inf…