jQuery Plugin: In-Line Text Edit
Introduction
Source
Inline-edit gives users the ability to make changes to text blocks and view those changes immedietly. The input from the users is passed to a server side script before returning the parsed data that is display back to the user.
Basic UsageWhile no parameters are required, it's recomended you ensure the path to your ajax script is correct, and that you add a hover class so users know to click on section.
$(function(){
$('.inline-edit').inlineEdit({ajax: '/path/to/ajax-script', hover: 'inline-hover'});
});
which will give you the following affect:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar purus, vel hendrerit ipsum tellus at ante.
-Unkown Author
Source
/**
* Inline Text Editing 1.2
* August 22, 2009
* Corey Hart @ http://www.codenothing.com
*/
;(function($){
$.fn.inlineEdit = function(options){
return this.each(function(){
// Settings
var $obj = $(this),
settings = $.extend({
href: 'ajax.php',
html: true,
load: function(){},
display: '.display',
form: '.form',
text: '.text',
save: '.save',
cancel: '.cancel',
loadtxt: 'Loading...',
hover: 'none-error-404',
postVar: 'text',
postData: {}
}, options||{}, $.metadata ? $obj.metadata() : {});
// Cache All Selectors
var $display = $(settings.display, $obj),
$form = $(settings.form, $obj),
$text = $(settings.text, $obj),
$save = $(settings.save, $obj),
$cancel = $(settings.cancel, $obj);
// Display Actions
$display.click(function(){
$display.hide();
$form.show();
if (settings.html)
$text.val( $display.html() ).focus();
return false;
}).hover(function(){ $display.addClass( settings.hover ); }, function(){ $display.removeClass( settings.hover ); });
// Cancel Actions
$cancel.click(function(){
$form.hide();
$display.show();
// Remove hover action if stalled
if ($display.hasClass( settings.hover ))
$display.removeClass( settings.hover );
return false;
});
// Save Actions
$save.click(function(){
settings.postData[settings.postVar] = $text.val();
$form.hide();
$display.html(settings.loadtxt).load(settings.href, settings.postData, settings.load).show();
// Remove hover action if stalled
if ($display.hasClass( settings.hover ))
$display.removeClass( settings.hover );
return false;
});
});
};
})(jQuery);
Download
Latest: inline-edit-1.2.zipReleased: August 22, 2009
-Removed tree dependency, as long as all objects are wrapped within the parent object, they are used
-All objects are now cached
-Load call back function can now be set within settings
-Added postData & postVar into settings for customized POST vars
-When traversing through parents for form tag, the first one found is used
-Removed jQuery Chain Breaking
-Metadata Support Added
-All objects are now cached
-Load call back function can now be set within settings
-Added postData & postVar into settings for customized POST vars
-When traversing through parents for form tag, the first one found is used
-Removed jQuery Chain Breaking
-Metadata Support Added
Past Release's:
April 3, 2009: inline-edit-1.1.4.zip
April 3, 2009: inline-edit-1.1.3.zip
RSS