jquery plug-in jquery editable plugin--click Edit Text Plugin

Jeditable is a jquery plugin, its advantage is that it can be edited in place, and submitted to the server processing, is a rare in-place editing plug-in.(note: In-place editing, also called instant editing?) The general process is this, when the user clicks on the text on the page, the text will appear in an edit box, the user changes the text after the completion of the click the Submit button, the new text will be sent to the server, and then the form disappears, showing the latest edited text. ), you can experience it yourself through this demo page.

Official website: http://www.appelsiini.net/projects/jeditable

The basic use method is as follows:

First edit an HTML file that contains this paragraph:

<div class= "edit"  Id= "div_1" >dolor</div> <div class= "Edit_area"  Id= "div_2" >lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum My nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>   

Then we use the following JS code for instant editing (to introduce the jeditable plugin first):

$ (document). Ready (function() {    $ ('. Edit '). Editable (' http://www.example.com/save.php ');});  

Enables editing of different content and more customizations:

$ (document). Ready (function() {    $ ('. Edit '). Editable (' http://www.example.com/save.php ', {        Indicator: ' Saving ... ',        tooltip   : ' Click to edit ... '    };    $ ('. Edit_area '). Editable (' http://www.example.com/save.php ', {type: ' textarea ', Cancel: ' Cancel ', Submit: ' OK ', Indicator: '  ', tooltip: ' Click to edit ... '}) ; 

The above customizations include the text of the button, the prompt message, and the loading picture display at the time of submission, etc.

So when the user clicks on the OK button, what data is sent to the server?

The data content contains the ID of the edit box and the new content: Id=elements_id&value=user_edited_content

You can also use the following method to modify the default parameter name:

$ (document). Ready (function() {    $ ('. Edit '). Editable (' http://www.example.com/save.php ', {         ID   : ' ElementID ',        name: ' NewValue '    })     ;

The data passed after modification becomes: elementid=elements_id&newvalue=user_edited_content

If a single-line text box is not paying attention to your requirements, you can use the TextArea Multiple lines edit box:

$ (document). Ready (function() {    $ ('. Edit_area '). Editable (' http://www.example.com/save.php ', {         loadurl  : ' http://www.example.com/load.php ',        type    : ' TextArea ',        submit  : ' OK '  });});

In addition, the jeditable supports the dropdown selection box:

$ ('. Editable '). Editable (' http://www.example.com/save.php ', {     data   : ' {' E ': ' Letter E ', ' F ': ' Letter F ' , ' G ': ' Letter G ', ' selected ': ' F '} ',    type   : ' Select ',    submit: ' OK '});   

Alternatively, you can get the data content from the server for the dropdown selection:

<? /  *$array [' e '] =  ' letter e '$array [' f '] = ' letter F '$array [' g '] = ' letter G '$array [' Selected '] = ' F 'print json_encode ($array);? >       

Then specify the URL address of the server output data via Loadurl:

$ ('. Editable '). Editable (' http://www.example.com/save.php ', {     loadurl: ' http://www.example.com/json.php ') ,    type   : ' Select ',    submit: ' OK '});   

If you want to set a different style for the component, you can:

$ ('. Editable '). Editable (' http://www.example.com/save.php ', {     cssclass: ' SomeClass '}); $ ('. Editable ') . Editable (' http://www.example.com/save.php ', {     loadurl: ' http://www.example.com/json.php ',    Type    : ' Select ',    submit  : ' OK ', Style: ' Display:inline '}); 

Or:

$ ('. Editable '). Editable (' http://www.example.com/save.php ', {     loadurl: ' http://www.example.com/json.php ') ,    type    : ' Select ',    submit  : ' OK ',    style   : ' Inherit '});    

Finally, a bit of advanced content, if you want to use a JS function instead of a URL to handle the commit, you can:

$ ('. Editable '). Editable (function(value, settings) {     Console.log (this);    Console.log (value);    Console.log (settings);    return(value);}, {type: ' textarea ', submit: ' OK ',});       

Handling callbacks:

$ ('. Editable '). Editable (' http://www.example.com/save.php ', {     type     : ' TextArea ',    submit   : ' OK ',    function(value, settings) {        Console.log (this); Console.log (value); Console.log (settings); }});

Using Additional parameters:

$ (". Editable"). Editable ("http://www.example.com/save.php";, {   submitdata: {foo: "Bar"};}); 

Get the contents of the display directly from the URL:

$ (". Editable"). Editable ("http://www.example.com/save.php";, {    loadurl: "http://www.example.com/load.php" });

English Original: http://www.appelsiini.net/projects/jeditable

jquery plug-in jquery editable plugin--click Edit Text Plugin