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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.