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()

jQuery Editable Plugin

1. Formats
2. Options
3. Examples
4. 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

*
type [string]

[default = 'text']
Currently the acceptable values are ‘text’,'password’,textarea’,’select’
You can extend these types by extending editableFactory which we will discuss later.

#
function onEdit(content){
#
this; //this is the current jQuery object
#
alert(content.current+':'+content.previous)

*
onSubmit [Function]

This will be called after user submit the value. Here you can check if value is change so send the new value to server.

   1.
      function onSubmit(content){
   2.
      this; //this is the current jQuery object
   3.
      alert(content.current+':'+content.previous)
   4.
      } 

*
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)
}

*
hidden Properties

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.

Demo: http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html

Download: http://arashkarimzadeh.com/downloads.html?func=download&id=45&chk=f109005ae8d61abd0cb9f98218f487b0&no_html=1

Source: http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html

Related Listings:

1. jQuery Browser Plugin The jQuery Browser Plugin is an addon for jQuery that...
2. Hwy jQuery ListMenu Plugin This jQuery plugin, developed in the iHwy Labs, allows you...
3. Sexy Combo – jQuery Plugin Sexy Combo is a jQuery plugin that allows you to...

Do you like this post?

Email: