Fork me on GitHub

Example: Basic inplaceedit field creation

How to create a inplaceedit field.

Basic InPlaceEdit creation

Use the following code to create a basic inputEx InPlaceEdit.

Complex group example

Combine InPlaceEdit and groups

Getting the value

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

Image url from a dropdown menu

Customize the buttons

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-inplaceedit', 'inputex-group', 'inputex-email', 'inputex-url', 'inputex-select', 'json', function(Y) {


    // Example 1
    new Y.inputEx.InPlaceEdit({parentEl: 'container1', editorField:{type:'string'}, animColors:{from:"#FFFF99" , to:"#FFFFFF"} });
    
    
    // Example 2
    new Y.inputEx.InPlaceEdit({
        parentEl: 'container2',
        editorField:{
            type:'group',
            fields: [
                { label: 'Firstname',name: 'firstname' },
                { label: 'Lastname', name: 'lastname' },
                { type:'url', label: 'Photo', name:'picUrl', favicon: false }
            ]
        },
        visu: {visuType: 'func', func: function(val) {
            if( Y.Lang.isUndefined(val) ) return this.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'
        }
    });
    
    
    // Example 3
    var field = new Y.inputEx.InPlaceEdit({parentEl: 'container3', editorField:{type:'string'} });
    var button = Y.inputEx.cn('button', null, null, "getValue");
    Y.one(button).on('click', function() {
        alert(field.getValue());
    });
    Y.one('#container3').appendChild(button);
    
    
    // Example 4
    Y.inputEx({
        type: 'inplaceedit',
        parentEl: 'container4',
        label: "PageRank",
        editorField:{
            type:'select',
            name: 'pagerank',
            choices: ['0','1','2','3','4','5','6','7','8','9','10']
        },
        visu: {
            visuType: 'func',
            func: function(val) {
                return Y.inputEx.cn('img',{src: "http://www.page-rank-lookup.com/i/style1/pagerank"+val+".png"});
            }
        },
        value: '5'
    });
    
    // Example 5
    Y.inputEx({
        buttonConfigs : [{
            isOkButton : true,
            value : "myButton"
        }],
        type: 'inplaceedit',
        parentEl: 'container5',
        label: "Customized buttons",
        editorField:{
            name: 'firstname'
        },
        visu: {
            visuType: 'func',
            func: function(val) {
                return val;
            }
        },
        value: 'Chuck Norris doesn\'t wear a watch'
    });
    
});