Form Elements In-place/Inline Editing with jQuery - TM-Editable

TM Editable is a jQuery plugin which enables In-place/inline editing on your form elements, with support for input validation and 5 built-in themes.

More examples:

• Dotted Line Theme Demo
• Holo Input Theme Demo
• Rounded Button Theme Demo
• Simple Button Theme Demo

Basic Usage:

1. Load the required jQuery TM Editable's CSS files in the document's head section.

<link href="src/css/tm_editable.css" rel="stylesheet">
<link href="src/css/tm_validator.css" rel="stylesheet">

2. Load a theme CSS. All the built-in themes available:

• basic-theme.css
• dotted-line-theme.css
• holo-input-theme.css
• round-button-theme.css
• simple-button-theme.css

<link href="src/css/themes/basic-theme.css" rel="stylesheet" >

3. Load the Font Awesome for editor icons.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

4. The Html.

<div class="tm_editable_container input-group theme1" 
     id="text_demo" 
     data-iplaceholder="Type Something.."
>
  <input type="text" value ="This is text field">
</div>

<div class="tm_editable_container input-group" 
     id="textarea_demo"
     data-iplaceholder="Type Something.." >
  <textarea>Detail Text Here</textarea>
</div>

5. Load the necessary jQuery library and other JS files at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="src/js/tm_validator.js"></script> 
<script src="src/js/tm_editable.js"></script> 

6. Initialize the plugin.

$('#text_demo, #textarea_demo').tm_editbale('init',{//OPTIONS});

---

This awesome jQuery plugin is developed by tmeditable. For more Advanced Usages, please check the demo page or visit the official website.