如何创建像Google+这样的修改个人资料页面？

Question

我们有一个目录，我们希望在可用性和编码方面实现现代化。我们已经整合了许多非常酷的元素，但我们想要使用的一个元素是您可以在Google +上编辑个人资料的方式。

我们如何创造类似的东西？

例如，我们希望在页面处于编辑状态时包含以下内容：

1. 当每个子部分悬停在上面时，我们希望整个盒子改变颜色。因此，您可以清楚地编辑该部分。
2. 点击此框后，我们希望文本可以使用保存和取消选项进行编辑。
3. 用户满意后，点击“完成”以保存页面上的整体更改。

如何做到这一点？需要哪些编码语言？

Answer 1

  

当每个子部分悬停在上面时，我们希望整个框改变   颜色。因此，您可以清楚地编辑该部分。

在使用:hover伪类的HTML / CSS中：http://jsfiddle.net/sc26u/

.profileSection:hover { background: #333; color: #fff }

  

单击该框，我们希望使用save和可编辑文本   取消选项。

     

用户满意后，点击“完成”以保存整体更改   页。

用于操作内容的JavaScript，用于保存的AJAX

Answer 2

使用'scriptaculous ajax framework'。它完全一样。我测试了它，它的效果很好......

它叫做就地编辑器。它的单线以及多线..

在此处获取代码http://madrobby.github.com/scriptaculous/ajax-inplaceeditor/