Use jeditable-jquery local editing plug-in

Jeditable is a jquery plug-in that can be edited locally and submitted to the server for processing. It is a rare plug-in for local editing.(Note: In-Place editing is also called Instant editing? The general process is as follows. When a user clicks a text on a webpage, the text appears in an editing box. After the user modifies the text, the user clicks the submit button, the new text is sent to the server, and the form disappears to display the latest edited text.), You can use this demo page to experience it yourself.

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

The basic usage is as follows:

First, edit an HTML file that contains the following section:

 <  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 nonummy nibh euismod tincidunt ut laoreet dolore Magna aliquam erat volutpat.  </  Div  > 

Then we use the following JSCodeTo implement real-time editing (jeditable plug-in must be introduced first ):

$ (Document). Ready (Function() {$ ('. Edit'). editable ('HTTP: // www.example.com/save.php');});
 

 

Implement editing of different content and more customization items:

$ (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 preceding custom items include button text, prompt information, and loading image display at the time of submission.

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

The data content contains the edit box ID and 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'});});
 

After modification, the transmitted data becomes: elementid = elements_id & newvalue = user_edited_content

If the single-line text box does not meet your requirements, you can use the textarea multi-line text editing 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, jeditable also supports drop-down box selection:

 
$ ('. 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 obtain the selected data from the server drop-down list:

<?PHP/*Http://www.example.com/json.php*/ $ Array['E'] = 'Letter E';$ Array['F'] = 'Letter F';$ Array['G'] = 'Letter G';$ Array['Selected'] = 'F';PrintJson_encode ($ Array);?>
 

Then, use loadurl to specify the URL of the server output data:

$ ('. Editable'). editable ('HTTP: // www.example.com/save.php', {Loadurl:'Http: // www.example.com/json.php', Type:'Select', Submit:'OK'});
 

 

If you want to set different styles 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:'Herit'});
 

Finally, let's look at the Advanced content. If you want to use a JS function instead of a URL to process the submission, you can do this:

 
$ ('. Editable'). editable (Function(Value, settings) {console. Log (This); Console. Log (value); console. Log (settings );Return(Value) ;}, {type:'Textarea', Submit:'OK',});
 

Processing callback:

$ ('. Editable'). editable ('HTTP: // www.example.com/save.php', {Type:'Textarea', Submit:'OK', Callback:Function(Value, settings) {console. Log (This); Console. Log (value); console. Log (settings );}});
 

Use additional parameters:

 
$ (". Editable"). editable ("http://www.example.com/save.php";, {Submitdata: {FOO:"Bar"};});
 

Get the display content directly from the URL:

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

Http://www.appelsiini.net/projects/jeditable.

 

Prepared by: Meng Chen
Exit: http://www.cnblogs.com/xiaoyao2011/
Personal site: http://www.coderidea.com/
You are welcome to reprint it in any form, but be sure to indicate the source.