/ Published in: JavaScript
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
function InlineEdit(attachNode,options){ this._attachNode = $(attachNode); this._value = $(attachNode).value; this._span = SPAN(null, this._value); insertSiblingNodesAfter(this._attachNode,[this._span]); addElementClass(this._attachNode, 'RK-invisible'); addElementClass(this._attachNode, 'RK-shrink'); addElementClass(this._span,'RK-clickable'); self = this; this.getValue = function(){ return self._attachNode.value; } this.setValue = function(newValue){ self._attachNode.value = newValue; self._span.innerHTML = newValue; } this.exitEdit = function(){ removeElementClass(self._span, 'RK-invisible'); removeElementClass(self._span, 'RK-shrink'); addElementClass(self._attachNode, 'RK-invisible'); addElementClass(self._attachNode, 'RK-shrink'); self.setValue( self._attachNode.value); } this.enterEdit = function(){ removeElementClass(self._attachNode, 'RK-invisible'); removeElementClass(self._attachNode, 'RK-shrink'); addElementClass(self._span, 'RK-invisible'); addElementClass(self._span, 'RK-shrink'); self._attachNode.value = self._span.innerHTML; self._attachNode.focus(); } this._highlight = function(){ addElementClass(self._span,'RK-highlight'); } this._removeHighlight = function(){ removeElementClass(self._span,'RK-highlight'); } connect(this._span, 'onclick', this.enterEdit); connect(this._attachNode,'onblur', this.exitEdit); connect(this._span,'onmouseover',this._highlight); connect(this._span,'onmouseout', this._removeHighlight); }