jQuery.editable plugin
Edit in place plugin for jQuery
Demo
Download
Via bower:
bower install jQuery.editableSYNOPSIS
Load jquery.editable.js
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.editable.min.js"></script>Make editable
$("span#edit").editable("click", function(e){
alert(e.value);
});Double click
$("span#edit").editable("dblclick", function(e){
alert(e.old_value + " : " + e.value);
});Click hold
$("span#edit").editable("clickhold", function(e){
alert(e.value);
});Edit with Button
var option = {trigger: $("input.btn_edit"), action: "click"};
$("span#edit").editable(option, function(e){
alert(e.value);
});Validate
$("span#zip").editable("click", function(e){
if( !e.value.match(/^\d{3}\-\d{4}$/) ){
e.target.html(e.old_value);
alert(e.value + " is not valid zip-code");
}
});TextArea Tag
var option = {type: "textarea", action: "click"};
$("div#sandbox").editable(option, function(e){
console.log(e.value);
});Build
edit "HEADER.txt"
% npm install -g uglify-js
% make build
=> jquery.editable.js