js实现就地编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="../js/jquery-2.1.1.js"></script>
<title></title>
</head>
<body>
<div id="titleClassical">
</div>
</body>
<script type="text/javascript">
function addEvent(obj, type, fn) {
if (obj.attachEvent) {
obj['e' + type + fn] = fn;
obj[type + fn] = function() {
obj['e' + type + fn](window.event);
}
obj.attachEvent('on' + type, obj[type + fn]);
} else
obj.addEventListener(type, fn, false);
}
function removeEvent(obj, type, fn) {
if (obj.detachEvent) {
obj.detachEvent('on' + type, obj[type + fn]);
obj[type + fn] = null;
} else
obj.removeEventListener(type, fn, false);
}
function EditInPlaceField(id, parent, value) {
this.id = id;
this.value = value ||'default value';
this.parentElement = parent;
this.createElements(this.id);
this.attachEvents();
}
EditInPlaceField.prototype = {
createElements: function(id){
this.containerElement = document.createElement('div');
this.parentElement.append(this.containerElement);
this.staticElement = document.createElement('span');
this.containerElement.appendChild(this.staticElement);
this.staticElement.innerHTML = this.value;
this.fieldElement = document.createElement('input');
this.fieldElement.type = 'text';
this.fieldElement.value = this.value;
this.containerElement.appendChild(this.fieldElement);
this.saveButton = document.createElement('input');
this.saveButton.type = 'button';
this.saveButton.value = 'save';
this.containerElement.appendChild(this.saveButton);
//cancel button
this.cancelButton = document.createElement('input');
this.cancelButton.type = 'button';
this.cancelButton.value = 'cancel';
this.containerElement.appendChild(this.cancelButton);
},//createElements
attachEvents:function(){
var that = this;
addEvent(this.staticElement, 'click', function(){that.convertToEditable();});
addEvent(this.saveButton, 'click', function(){that.save();});
addEvent(this.cancelButton, 'click', function(){that.cancel();});
},
convertToEditable:function(){
this.staticElement.style.display = 'none';
this.fieldElement.style.display = 'inline';
this.saveButton.style.display = 'inline';
this.cancelButton.style.display = 'inline';
},
save:function(){
this.value = this.getValue();
console.log(this.value);
var that = this;
var callback = {
success:function(){ that.convertToText();},
failure:function(){ alert('error saving value.');}
};
//ajaxRequest('GET', 'save.php?id='+this.id+'&value='+this.value, callback);
},
cancel:function(){
this.converToText();
},
converToText:function(){
this.fieldElement.style.display = 'none';
this.saveButton.style.display = 'none';
this.cancelButton.style.display = 'none';
this.staticElement.style.display = 'inline';
this.setValue(this.value);
},
setValue:function(value){
this.fieldElement.value = value;
this.staticElement.innerHTML = value;
},
getValue:function(){
return this.fieldElement.value;
}
};
var titleClassical = new EditInPlaceField('titleClassical', $('body'), 'Title Here');
var currentTitleText = titleClassical.getValue();
</script>
</html>
