Input Text
You can use this plugin in input text element to edit any single line information

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>

JS

{{data.text}}
Textarea
You can use this plugin in textare element to edit any descriptive information

HTML

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

JS

{{data.textarea}}
Radio
You can use this plugin in Radio element to edit radio

HTML

<span class="radio_container full_row">
    <span class="single_radio full_row">
<input type="radio" name="radio_ex" value="Gmail" id="r_demo1" checked> <label for="r_demo1">Gmail</label> </span>
<span class="single_radio full_row"> <input type="radio" name="radio_ex" value="Yahoo" id="r_demo2"> <label for="r_demo2">Yahoo</label> </span>
<span class="single_radio full_row"> <input type="radio" name="radio_ex" value="Facebook" id="r_demo3"> <label for="r_demo3">Facebook</label> </span>
</span>

JS

{{data.radio}}
Checkbox
You can use this plugin in Checkbox element to edit checkbox

HTML

<div class="tm_editable_container input-group" id="checkbox_demo">
<span class="single_checkbox full_row"> <input type="checkbox" name="foo" value="bar2" id="have_gmail" checked> <label for="have_gmail">Do you have gmail</label> </span>
</div>

JS

{{data.checkbox}}
Select Dropdown
You can use this plugin in Select element to edit selective information

HTML

<div class="tm_editable_container input-group" id="select_demo">
    <select class="my_select">
        <option value="0"> Option0</option>
        <option value="1"> Option1</option>
        <option value="2" selected="selected"> Option2</option>
        <option value="3"> Option3</option>
        <option value="4"> Option4</option>
        <option value="5"> Option5</option>
    </select>
</div>

JS

{{data.select}}
Other Features
Apply external plugin

Select2 Plugin

Uniform Plugin

You can use this plugin in input text element to edit any single line information

HTML

										As shown in above examples.
									

JS

//execute external plugin on init after option
$('#select2_demo').tm_editbale('init',{
    init:{
            after:function(){
                $('.my_select2').select2();
                //OR $('#have_uniform').uniform();
            }
        }
});
									
								
Validation

Required Text box

Email Validation

Number Validation

Required Select box

You can use this plugin in input text element to edit any single line information

HTML

add attribute for validation in html data-ivalidate="text / number / email/ nullable(default)"
										data-ierror="message to show if validation return false."
									

JS

//ivalidate and ierror options are availavle for validation
$('#text_demo').tm_editbale('init',{
	// text / number / email/ nullable(default)
	ivalidate = "text";
	ierror ="Please Insert Valid info.."
});
								
Custom Function on submit

Before alert

After alert

Post ajax request

You can use this plugin in input text element to edit any single line information

HTML

As shown on above examples.
									

JS

//OK - before and after options are availble
$('.before_alert_demo').tm_editbale('init',{
    ok:{
            before:function(current_value){
                deferred = $.Deferred();
                //Start your code here 
                alert('Before Alert-'+current_value);
                //End your code here	
                deferred.resolve();
                return deferred.promise();
            },
            after:function(){
            	alert('after alert');
        	}
        }
});

//ajax post request
 $('.post_alert_demo').tm_editbale('init',{
	ok:{
	        before:function(current_value){
	            var deferred = $.Deferred();
	            $.ajax({
	                    type:"Post",
	                  url: "test.php",
	                  data:{'info':current_value}
	                }).done(function() {
	                    deferred.resolve();
	                }).fail(function(){
	                    deferred.resolve();
	                });
	          return deferred.promise();
	        }
	    }
});
								
Remover

Before Remove

After Remove

You can use this plugin in input text element to edit any single line information

HTML

add attribute data-remover="true"
									

JS

$('.before_remover_demo').tm_editbale('init',{
    remove:{
            before:function(){
                deferred = $.Deferred();
                //Start your code here 
                alert('Before Alert');
                //End your code here	
                deferred.resolve();
                return deferred.promise();
            },
            after:function(){
            	alert('after alert');
        	}
        }
});

//ajax post request
 $('.before_remover_demo').tm_editbale('init',{
	remove:{
	        before:function(){
	            var deferred = $.Deferred();
	            $.ajax({
	                    type:"Post",
	                  url: "test.php",
	                  data:{'info':12}
	                }).done(function() {
	                    deferred.resolve();
	                }).fail(function(){
	                    deferred.resolve();
	                });
	          return deferred.promise();
	        }
	    }
});
Width Customization

Outside - in same line

Outside - double line

Inside - in same line

Intside - double line

You can use this plugin in input text element to edit any single line information

HTML

As shown in above examples.
									

JS

//new_line option available in inside_btn and outside_btn option
$('.outside_double_line').tm_editbale('init',{
    outside_btn:{
        //pass false for single line
        new_line:true,
        pull:'left'
    }
});
$('.inside_double_line').tm_editbale('init',{
    outside_btn:{
       //pass false for single line
        new_line:true,
        pull:'left'
    }
});