网页通常主要用于浏览,如果想要编辑的话,就要借助表单。
1、单行段内编辑
单字段行内编辑,是最基础的行内编辑样式,就是在页面内编辑一个文本字段,编辑操作能够直接在原地进行。有两种方式:
隐藏编辑链接。
在普通浏览模式中,隐藏编辑链接,不区分字段是否可编辑。
在鼠标悬停在当前字段时,出现编辑提示,需要注意以下三点:
1. 「指针」变为「手型」
2. 编辑区域底色变黄
3. 出现「Tooltips」提示单击编辑
鼠标点击后,出现输入框、确定、取消表单元素,同时光标定位在输入框中。
显示编辑链接
在浏览的时候便在可编辑行附近出现文字链/图标。
鼠标点击后,和第一种编辑模式一样。
两者的主要区别在于,编辑功能是否容易发现。所以,这时候需要评估易读性和易编辑性哪一个更重要。
2、多字段行内编辑
多行段内编辑可以同时编辑多个值。
当鼠标悬停在问题上时,便会出现邀请编辑的按钮。
鼠标点击问题后,标题和内容便会变成可以编辑的表单,可以直观的编辑内容,而且表单还可以扩展,包含其他项。
一个表格中多字段编辑的案例,当点击编辑按钮后,表格内字段都直接变成输入框。为了能放下输入框等表单元素,可以适当增加扩大空间,确保切换到编辑模式时表单不跳动。
3、覆盖层编辑
覆盖层编辑是通过在页面上方添加一层,来放置编辑表单。虽然编辑时也不会离开当前页面,但却不是在页面中直接实现编辑。
覆盖层主要有浮层、对话框和抽屉三种。
如果需要编辑的信息较少,那么可以直接使用浮层承载。
当需要编辑的信息过多时,可以采用对话框和抽屉承载。
网友评论