Edit In Place With Effects

Graphical effects can be used to improve user experience.

People have been asking me to add configurable effects into Jeditable. I believe in writing reusable code. This also means I do not want to force people use anything specific including graphical effects I happen to like. I believe people should be able to use any 3rd party effects they want to use.

Luckily jQuery makes this easy to implement. Just add effects you want to same element selector you make editable.

For example you want to change background colour to yellow when move mouse over editable area:

$(document).ready(function() {
    $(".editable").mouseover(function() { 
        $(this).css('background-color', '#ffffd3');
    });
    $(".editable").mouseout(function() { 
        $(this).css('background-color', '#fff');
    });
    $(".editable").editable("http://www.example.com/save.php", { 
        indicator : "<img src='img/indicator.gif'>",
        type      : "textarea",
        tooltip   : "Click to edit."
    });
});

Or use higlightFade plugin by Blair Mitchelmore for more elegant effect:

    $(".editable").mouseover(function() { 
        $(this).highlightFade({end:'#ffffd3'});
    });
    $(".editable").mouseout(function() { 
        $(this).highlightFade({end:'#fff', speed:200});
    });
    $(".editable").editable("http://www.example.com/save.php", { 
        indicator : "<img src='img/indicator.gif'>",
        tooltip   : "Click to edit."
    });
});

Check above examples in in place editor with fx / effects test page.

• Tweet
• G+

Tagged with: Javascript   Jeditable   Jquery