|
This is a real customizable jQuery editable plugin. Currently it can convert any tag (span, div, p and ...) to text input, password, textarea, drop-down list.
You can easily extend it by adding your own input type using its editableFactory object. $('div.editable').editable()
%24%28%27div.editable%27%29.editable%28%29 Above code will convert all div tags, which has .editable class, to editable. click me!!!
Download Editable (jQuery In Place Editor)Current version is 1.3.3
You can download it here.
jQuery Editable Plugin - Formats
- Options
- Examples
- Extending Editable
Formats - $(selector).editable(options)
For creating editable object. - $(selector).editable('disable') added in editable 1.3.0
For disabling editable object after it's creation. - $(selector).editable('enable') added in editable 1.3.0
For enabling a disabled editable object. - $(selector).editable('destroy') added in editable 1.3.0
For destroying Editability of an editable object.
Options[default = 'text']
Currently the acceptable values are 'text','password',textarea','select' You can extend these types by extending editableFactory which we will discuss later. editBy [string] added in Editable 1.3.3
[default = 'click']
You can define jQuery event type : 'blur','dblclick','change','click' This option may make major problem if you don't have enough knowledge about events order in different browsers. [default = 'blur']
You can define jQuery event type : 'blur','dblclick','change','click' If you set submit option, you cant use submitBy option. Editables are by default submitted on double click. If you want to enable the submit button you must set a value for submit option.
For example set it to 'save'. If you set type option to 'select' you'd better to define the submit option or set submitBy to blur or change. If you want to enable the cancel button you must set value such as 'discard' or whatever you want. editClass [string:cssClass]
You can change the CSS class of your input element to the defined CSS class in your style sheet. This style will affect just the input element. You can change submit button or cancel button styles by setting their styles in your CSS. For example if you are going to convert a div to editable you can assign a CSS class such as .editable and also define your style for buttons '.editable button'. It is used for passing customized data. For example in using 'select' type you must define the options in key/value format:
{'key1':'value1','key2':'value2','key3':'value3',...} You can also use it while you are extending it to use your own input tag. This function will be called each time you click on the text to convert it to edit status.After the tags converted to input tags this function will be fired.
You can use it to show a message or do some checking and block the inputs. function onEdit(content){ this; //this is the current jQuery object alert(content.current+':'+content.previous) }
function%20onEdit%28content%29%7B%0A%20%20%20%20this%3B%20%2F%2Fthis%20is%20the%20current%20jQuery%20object%0A%20%20%20%20alert%28content.current%2B%27%3A%27%2Bcontent.previous%29%0A%7D This will be called after user submit the value. Here you can check if value is change so send the new value to server. function onSubmit(content){ this; //this is the current jQuery object alert(content.current+':'+content.previous) }
function%20onSubmit%28content%29%7B%0A%20%20%20%20this%3B%20%2F%2Fthis%20is%20the%20current%20jQuery%20object%0A%20%20%20%20alert%28content.current%2B%27%3A%27%2Bcontent.previous%29%0A%7D onCancel [Function] added in Editable 1.3.3
This will be called if you assign cancel option. Here you have access to current and previous value of editable object. function onCancel(content){ this; //this is the current jQuery object alert(content.current+':'+content.previous) }
function%20onCancel%28content%29%7B%0A%20%20%20%20this%3B%20%2F%2Fthis%20is%20the%20current%20jQuery%20object%0A%20%20%20%20alert%28content.current%2B%27%3A%27%2Bcontent.previous%29%0A%7D You can access to current value or previous value of the editables any time by using $('editable selector').data('editable.current') or $('editable selector').data('editable.previous'). Be careful while you are using these two hidden properties.
You usually do not need these because you can easily access them in your onSubmit function and onEdit function by using content.current and content.previous. Examples (Create Editable)
- This is an editable in simplest way we just add a onEdit function to it
$('.editable1').editable({onEdit:begin});
%24%28%27.editable1%27%29.editable%28%7BonEdit%3Abegin%7D%29%3B function begin(){ this.append('Click somewhere else to submit'); }
function%20begin%28%29%7B%0A%20%20%20%20this.append%28%27Click%20somewhere%20else%20to%20submit%27%29%3B%0A%7D
*In these example don't forget to add jQuery ready function to each code. so your code must be like this
$(function(){ $('.editable1').editable({onEdit:begin}); function begin(){ this.append('Click somewhere else to submit'); } });
%24%28function%28%29%7B%0A%24%28%27.editable1%27%29.editable%28%7BonEdit%3Abegin%7D%29%3B%0Afunction%20begin%28%29%7B%0A%20%20%20%20this.append%28%27Click%20somewhere%20else%20to%20submit%27%29%3B%0A%7D%0A%7D%29%3B
Click to edit me! - Editable will return a jquery object so you can re-use it as you see below.
$('.editable2').editable({type:'textarea',submitBy:'dblclick'}).css('background-color','#39c');
%24%28%27.editable2%27%29.editable%28%7Btype%3A%27textarea%27%2CsubmitBy%3A%27dblclick%27%7D%29.css%28%27background-color%27%2C%27%2339c%27%29%3B Click to edit me! I will submit by dblclick!!! - You can add checking after submiting or compare previous value with new value before calling Ajax function
$('.editable3').editable({ type:'password', submit:'save', onSubmit:end });
%24%28%27.editable3%27%29.editable%28%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%27password%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20submit%3A%27save%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSubmit%3Aend%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%29%3B <p class="editable3">Enter Password </p>
%3Cp%20class%3D%22editable3%22%3EEnter%20Password%3C%2Fp%3E function end(content){ alert(content.current+':'+content.previous) }
function%20end%28content%29%7B%0A%20%20%20%20alert%28content.current%2B%27%3A%27%2Bcontent.previous%29%0A%7D Enter Password! - When you are using 'select' type you must set the text of div or p or whatever tag you are using to one of the options values otherwise the value will not be selected by default.
$('.editable4').editable({ type:'select', options:{'value1':'Item 1', 2:'Item 2', 'Item 3':'Item 3'}, submit:'save', cancel:'cancel', editClass:'resultItem', onSubmit:end });
%24%28%27.editable4%27%29.editable%28%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%27select%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3A%7B%27value1%27%3A%27Item%201%27%2C%202%3A%27Item%202%27%2C%20%27Item%203%27%3A%27Item%203%27%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20submit%3A%27save%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20cancel%3A%27cancel%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20editClass%3A%27resultItem%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20onSubmit%3Aend%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%29%3B <div class="editable4">Item 2 </div>
%3Cdiv%20class%3D%22editable4%22%3EItem%202%3C%2Fdiv%3E Item 2 As you see when the text change to drop-down it Item 2 is selected by default.
<div class="editable4">Item-2 </div> <--! This is wrong because 'Item-2' is not defined in options -->
%3Cdiv%20class%3D%22editable4%22%3EItem-2%3C%2Fdiv%3E%0A%3C--%21%20This%20is%20wrong%20because%20%27Item-2%27%20is%20not%20defined%20in%20options%20--%3E
Extending EditableYou can easily extend jQuery Editable by reading this article. Tags: JavaScript | jQuery | Plugin
|
