您的位置:首页 > 其它

(翻译)就地编辑器(Inplace Editor)

2017-11-12 20:00 253 查看
问题概述 用户能够在网页上便捷地编辑内容。示例

 用途[/b]用于当用户仅编辑少量内容时;
用于用户编辑简单格式的内容时,例如编辑下拉框中的字符串内容;
用于想让用户直接在当前页面编辑某项值,而不是跳转到另外的管理界面去编辑的情况。
解决方案 用户可以在网页中显示某项内容的同一位置编辑其值[1],这为用户提供了简便的方式对网页部分内容进行编辑,不需要跳转到另外的编辑页面进行内容编辑。通常情况下,鼠标悬停事件触发就地编辑。 就地编辑器模式允许对网页中的元素进行局部编辑,本模式将编辑控件放在元素旁边,这样便于对元素内容进行编辑。 以上图为例,应用系统处于编辑模式时,如果用户将鼠标移动到网页标题元素处,会在此处显示标题编辑控件[2]。标题元素背景被高亮显示,并在标题处出现提示框提示用户点击标题进行编辑。一旦用户点击标题,就会在标题处出现内容编辑框(文本输入控件、下拉选择控件等),同时还带有保存按钮和取消按钮。通常,内容编辑框的样式与原始数据的样式一致,例如如果原始内容字体大小为20,则内容编辑框中的字体大小也为20,这种方式的目的是为了让用户将正在编辑的内容和原始内容联系在一起。接下来,用户编辑内容编辑框中的值(该值初始化为原始数据的值),然后点击保存或者取消按钮。如果点击保存按钮,应用程序调用AJAX代码将值保存到后台数据库,接着更新标题元素的内容并返回正常显示状态。如果点击取消按钮则标题元素内容不做任何改变并返回正常显示状态。 本模式通常结合AJAX技术使用。在JavaScript代码中异步调用AJAX与服务器通信,这样不需要刷新整个页面就能更新网页的局部内容。网上有很多JavaScript库提供就地编辑器。说明 就地编辑器为用户提供了简便的方式对网页部分内容进行编辑,不需要跳转到另外的编辑页面进行内容编辑。用户直接点击并编辑网页上的内容,编辑完之后也不用重新加载网页内容。
原文地址:http://ui-patterns.com/patterns/InplaceEditorPS:才发现网页博客中显示博客名称的地方也是用的本模式。

[1]原文:Let users edit values in the same place as they are displayed.[2]原文:a page title element will display editing controls when the user hovers their mouse over it. ,个人理解应该是鼠标移动到某个网页元素时,在这个网页元素的位置出现编辑控件的形状或者类似的东西,提示用户可以编辑。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: