mochikit inline edit


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



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.