jQuery Plugin Form Elements In-place/Inline Editing | TM-Editable

TM-EDITABLE is a jquery plugin, which provides in-place editing and deleting HTML input elements with some amazing attributes.

inline edit table javascript, inline edit material ui, inline edit jquery, in place editing, inline edit ui

Features

  • Html5 Editable Input Input
  • Delete item
  • Validation
  • Application of third-party add-ons
  • Available topics
  • Events when formatting, saving and deleting

How to make use of it:

1. Load the CSS files required for jQuery TM Editable in the header section of the document.

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

2. Download a CSS theme.

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

3. Download Font Awesome for Icon Editor.

<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 webpage.

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

Form Elements In-place/Inline Editing with jQuery, TM-EDITABLE Plugin/Github


See Demo And Download

Official Website(tmeditable): Click Here

This superior jQuery/javascript plugin is developed by tmeditable. For extra Advanced usage, please go to the official website.

Share