edit_in_place : ajax_field.js

暂时只提供输入框的切换功能，以后实现属性的Ajax.update功能

/* Ajax Field , version 1.0.0
* (c) 2006 discolt <discolt@sohu.com>
*
* Team by Vnetoo
/*--------------------------------------------------------------------------*/

AjaxField = Class.create();

AjaxField.prototype = {

initialize: function(input) {
this.field = input;
this.wrapper = null;
this.injectWrapper();
this.addHandleEvent();
},

// 插入Wrapper对象到页面
injectWrapper: function() {
this.createWrapper();
this.positionWrapper();
},

// 创建Wrapper对象
createWrapper: function() {
this.wrapper = document.createElement("span");
this.setWrapperValue();
this.field.parentNode.appendChild(this.wrapper);
},

// 定位Wrapper到属性的位置
positionWrapper: function() {
var wrapperStyle = this.wrapper.style;
wrapperStyle.textDecoration = 'underline';
wrapperStyle.position = 'absolute';
var fieldPos = RicoUtil.toDocumentPosition(this.field);
wrapperStyle.top = fieldPos.y + 'px';
wrapperStyle.left = fieldPos.x + 'px';
wrapperStyle.width = this.field.offsetWidth + '100px';
this.hideField();
},

// 设置Wrapper值,如果值没改变返回false
setWrapperValue: function() {
var text = this.field.tagName == 'SELECT' ? this.field[this.field.selectedIndex].text : this.field.value;
if (text.length == 0) {
text = "-请输入-";
}
if (text != this.wrapper.innerHTML) {
this.wrapper.innerHTML = text;
return true;
} else {
return false;
}
},

// 隐藏Field
hideField: function() {
this.field.style.display = 'none';
this.wrapper.style.display = '';
},

// 添加事件
addHandleEvent: function() {

var field = this.field;
var wrapper = this.wrapper;
var ajaxField = this;

// 覆盖类被双击时
// 隐藏Wrapper对象并显示元素
this.wrapper.ondblclick = function() {
wrapper.style.display='none';
field.style.display = '';
field.focus();
};

// 当元素失去焦点时，设置覆盖类的值，并隐藏元素，显示覆盖类
this.field.onblur=function() {
if (ajaxField.setWrapperValue()) {
//alert('ajax updating ...');
alert(field.form.name + " submit : for " + field.form.action + " update field:" + field.name + " to value:" + field.value);
}
field.style.display='none';
wrapper.style.display='';
};

}
}


var __EDITABLE_CLASS_NAME = 'editable';
/** makeEditable */
function makeEditable() {
var inputs = document.getElementsByClassName(__EDITABLE_CLASS_NAME);
inputs.each(function(el) {
new AjaxField(el);
});
}
Event.observe(window, 'load', makeEditable, false);