Ajax文本实时编辑
曾经看到的一篇文章介绍的”Edit-in-Place with Ajax“，觉得写得不错，就测试了一下。文本实时编辑在Flickr上有类似的应用。
下面就来介绍一下这个效果的做法，这里是Demo：
首先这是基于prototype.js的，需要用到prototype里面的Ajax类以及Dom操作方法。
xhtml:
<p id=“desc”>Hello, I’m Adam Lu.</p>
id为”desc”的一个p里面放的是需要修改的文本
css:
.editable{color:#000000; background-color:#ffffd3;}
class为editable是鼠标移到文本上时的样式
js:
Event.observe(window, ‘load’, init, false);//文档加载时执行初始化工作
function init(){
makeEditable(”desc”);//初始化对象，传入文本的id - ”desc”
}
function makeEditable(id){
Event.observe(id, “click”, function(){edit($(id));}, false);//点击时调用edit函数
Event.observe(id, “mouseover”, function(){showAsEditable($(id));}, false);
Event.observe(id, “mouseout”, function(){showAsEditable($(id), true);}, false);
}
function showAsEditable(obj, clear){//鼠标移过时改变样式
if(!clear){
Element.addClassName(obj, “editable”);
}else{
Element.removeClassName(obj, “editable”);
}
}
function edit(obj){//编辑文本
Element.hide(obj);//隐藏文本
var textarea = “<div id=’”+obj.id+”_editor’><textarea id=’”+obj.id+”_edit’>”+obj.innerHTML+”</textarea>”;
var button = “<button id=’”+obj.id+”_save’>保存</button> or <button id=’”+obj.id+”_cancel’>取消</button></div>”;
new Insertion.After(obj, textarea+button);//将文本输入框和按钮添加到p后面
Event.observe(obj.id+”_save”, “click”, function(){saveChanges(obj);}, false);//点击保存按钮，调用saveChange函数
Event.observe(obj.id+”_cancel”, “click”, function(){cleanUp(obj);}, false);//点击取消按钮，调用cleanUp函数
}
function cleanUp(obj, keepEditable){//取消操作函数
Element.remove(obj.id+”_editor”);//移除文本框和按钮
Element.show(obj);//显示文本
if(!keepEditable){
showAsEditable(obj, true);
}
}
function saveChanges(obj){//保存操作函数
var new_content = escape($F(obj.id+”_edit”));
obj.innerHTML = “Saving…”;
cleanUp(obj, true);
var success = function(t){editComplete(t, obj);}
var failure = function(t){editFailed(t, obj);}
var url = “php/edit.php”;
var pars = “id=”+obj.id+”&content=”+new_content;
var myAjax = new Ajax.Request(url, {method:”post”, postBody:pars, onSuccess:success, onFailure:failure});
}
function editComplete(t, obj){
obj.innerHTML = t.responseText;
showAsEditable(obj, true);
}
function editFailed(t, obj){
obj.innerHTML = “Sorry, the update failed.”;
cleanUp(obj);
}