美文网首页
编辑功能

编辑功能

作者: 丁颖 | 来源:发表于2021-11-20 12:13 被阅读0次

网页通常主要用于浏览,如果想要编辑的话,就要借助表单。

1、单行段内编辑

单字段行内编辑,是最基础的行内编辑样式,就是在页面内编辑一个文本字段,编辑操作能够直接在原地进行。有两种方式:

隐藏编辑链接。

在普通浏览模式中,隐藏编辑链接,不区分字段是否可编辑。

在鼠标悬停在当前字段时,出现编辑提示,需要注意以下三点:

1. 「指针」变为「手型」

2. 编辑区域底色变黄

3. 出现「Tooltips」提示单击编辑

鼠标点击后,出现输入框、确定、取消表单元素,同时光标定位在输入框中。

显示编辑链接

在浏览的时候便在可编辑行附近出现文字链/图标。

鼠标点击后,和第一种编辑模式一样。

两者的主要区别在于,编辑功能是否容易发现。所以,这时候需要评估易读性和易编辑性哪一个更重要。

2、多字段行内编辑

多行段内编辑可以同时编辑多个值。

当鼠标悬停在问题上时,便会出现邀请编辑的按钮。

鼠标点击问题后,标题和内容便会变成可以编辑的表单,可以直观的编辑内容,而且表单还可以扩展,包含其他项。

一个表格中多字段编辑的案例,当点击编辑按钮后,表格内字段都直接变成输入框。为了能放下输入框等表单元素,可以适当增加扩大空间,确保切换到编辑模式时表单不跳动。

3、覆盖层编辑

覆盖层编辑是通过在页面上方添加一层,来放置编辑表单。虽然编辑时也不会离开当前页面,但却不是在页面中直接实现编辑。

覆盖层主要有浮层、对话框和抽屉三种。

如果需要编辑的信息较少,那么可以直接使用浮层承载。

当需要编辑的信息过多时,可以采用对话框和抽屉承载。

相关文章

  • 编辑功能

    网页通常主要用于浏览,如果想要编辑的话,就要借助表单。 1、单行段内编辑 单字段行内编辑,是最基础的行内编辑样式,...

  • PDF小白新技能Get√:PDF文档编辑如此简单(二)

    上一篇为大家分享了特色功能的PDF文档编辑功能一:编辑文本, 今天为大家整理了PDF文档编辑功能二:编辑对象。 所...

  • App编辑功能

    输入情况 图片不能即时显现

  • 我喜欢的iOS 11新功能

    1、截图编辑功能 2、方便打开蜂窝网功能 3、livePhoto编辑功能 4、键盘单手操作功能iMessage新增...

  • VUE自定义富文本编辑器

    需求分析 1.开发一个富文本编辑器,包含功能:编辑标题,编辑内容,编辑图片,拥有保存,发布功能。思路:1.mark...

  • Subversion Edge:hook使用

    Subversion Edge默认禁用了hook模版的编辑功能。如何启用编辑功能呢?参考:https://lium...

  • iOS中使用OpenGL 实现增高功能

    功能效果 功能分析 功能:渲染一张传入的图片 -> 手动选择编辑区域 -> 通过滑块来编辑区域的增高或者缩短 Op...

  • Qt控件编辑功能

    简述功能 1.支持拉伸,拖拽;2.双击控件支持编辑功能; 效果图 代码 工程文件 Qt交流大会 853086607...

  • vscode 快速编辑功能

    随着时间的推移,Visual Studio Code 已成为许多开发人员日常使用的重要工具,因为它简单、快速,并且...

  • day48-Django删除修改功能、富文本编辑器和日志文件

    一、删除功能 1.编辑urls.py配置文件 2.删除文章功能方法1: 方法2: 二、修改功能 1.编辑urls....

网友评论

      本文标题:编辑功能

      本文链接:https://www.haomeiwen.com/subject/wkwbgltx.html