美文网首页
编辑功能

编辑功能

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

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

    1、单行段内编辑

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

    隐藏编辑链接。

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

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

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

    2. 编辑区域底色变黄

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

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

    显示编辑链接

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

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

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

    2、多字段行内编辑

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

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

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

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

    3、覆盖层编辑

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

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

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

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

    相关文章

      网友评论

          本文标题:编辑功能

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