Advanced Search

mochikit inline edit

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. function InlineEdit(attachNode,options){
  2. 	this._attachNode = $(attachNode);
  3. 	this._value = $(attachNode).value;
  4. 	this._span = SPAN(null, this._value);
  5. 	insertSiblingNodesAfter(this._attachNode,[this._span]);
  6. 	addElementClass(this._attachNode, 'RK-invisible');
  7. 	addElementClass(this._attachNode, 'RK-shrink');
  8. 	addElementClass(this._span,'RK-clickable');
  9. 	self = this;
  10.  
  11. 	this.getValue = function(){
  12. 		return self._attachNode.value;
  13. 	}
  14. 	this.setValue = function(newValue){
  15. 		self._attachNode.value = newValue;
  16. 		self._span.innerHTML = newValue;
  17. 	}
  18.  
  19. 	this.exitEdit = function(){
  20. 		removeElementClass(self._span, 'RK-invisible');
  21. 		removeElementClass(self._span, 'RK-shrink');
  22. 		addElementClass(self._attachNode, 'RK-invisible');
  23. 		addElementClass(self._attachNode, 'RK-shrink');
  24. 		self.setValue( self._attachNode.value);
  25. 	}
  26.  
  27. 	this.enterEdit = function(){
  28. 		removeElementClass(self._attachNode, 'RK-invisible');
  29. 		removeElementClass(self._attachNode, 'RK-shrink');
  30.  
  31. 		addElementClass(self._span, 'RK-invisible');
  32. 		addElementClass(self._span, 'RK-shrink');
  33. 		self._attachNode.value = self._span.innerHTML;
  34. 		self._attachNode.focus();
  35. 	}
  36.  
  37. 	this._highlight = function(){
  38. 		addElementClass(self._span,'RK-highlight');
  39.  
  40. 	}
  41.  
  42. 	this._removeHighlight  = function(){
  43. 		removeElementClass(self._span,'RK-highlight');
  44. 	}
  45.  
  46. 	connect(this._span, 'onclick', this.enterEdit);
  47. 	connect(this._attachNode,'onblur', this.exitEdit);
  48. 	connect(this._span,'onmouseover',this._highlight);
  49. 	connect(this._span,'onmouseout', this._removeHighlight);
  50. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.