inputEx - InPlaceEdit Usage

Basic InPlaceEdit creation

Use the following code to create a basic inputEx InPlaceEdit.

new YAHOO.inputEx.InPlaceEdit({parentEl: 'container1', editorField:{type:'string', inputParams: {} }, animColors:{from:"#FFFF99" , to:"#DDDDFF"} });

Complex group example

Combine InPlaceEdit and groups

new YAHOO.inputEx.InPlaceEdit({ parentEl: 'container2', editorField:{ type:'group', inputParams: { fields: [ { inputParams: {label: 'Firstname',name: 'firstname' } }, { inputParams: {label: 'Lastname', name: 'lastname' } }, { type:'url', inputParams: {label: 'Photo', name:'picUrl', favicon: false} } ] } }, visu: {visuType: 'func', func: function(val) { if( YAHOO.lang.isUndefined(val) ) return YAHOO.inputEx.messages.emptyInPlaceEdit; return '<img src="'+val.picUrl+'" style="width: 128px; height: 128px;"><br /><b>'+val.firstname+' '+val.lastname+'</b>'; }}, value: { firstname: 'Lena', lastname: 'Idontknow', picUrl: 'http://www.limsi.fr/Individu/vezien/lena.jpg' } });

Getting the value

When the editor is opened, getValue return the editor value.

var field = new YAHOO.inputEx.InPlaceEdit({parentEl: 'container3', editorField:{type:'string', inputParams: {} } }); var button = inputEx.cn('button', null, null, "getValue"); YAHOO.util.Event.addListener(button, 'click', function() { alert(field.getValue()); }); YAHOO.util.Dom.get('container3').appendChild(button);