Documents
How to use?
To use this plugin you will have to download mentioned js and css file, and put them in your project. This plugin is dependent on jquery.
  • Dependency

    Jquery 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    							
    Fontawesome for icons , it's not necessory. You can use your own icons, to know how go through options.
  • Plugin CSS Files

    tm_editable.css
    tm_validator.css

    Plugin Js Files

    tm_editable.js
    tm_validator.js
  • Sample HTML

    For theme wise example and code check out Demo
    Theme wise js code is different.
    <div class="tm_editable_container input-group theme1" id="text_demo" data-iplaceholder="Type Something..">
    <input type="text" value ="This is text field" />
    </div>

    Sample Js

    Very short and simple code is needed to execute TmEditable. You can apply tm_editable on any element which has class of tm_editable_container and input-group. Here in this example text demo is the jquery selector.
    $('.text_demo').tm_editbale('init',{});
Html elements markup
Html Elements Markup
Input Text
<div class="tm_editable_container input-group theme1" id="text_demo" data-iplaceholder="Type Something..">
<input type="text" value ="This is text field" />
</div>
Textarea
<div class="tm_editable_container input-group" id="textarea_demo" data-iplaceholder="Type Something.." >
<textarea>Detail Text Here</textarea>
</div>
Checkbox
<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>
Radio
<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>
Select
<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>
Theme Wise JS formats
Theme name js format
Basic Theme
{{data[0]['basic-theme']['text']}}
Simple Button Theme
{{data[0]['simple-button-theme']['text']}}
Radio Button Theme
{{data[0]['round-button-theme']['text']}}
Dotted Line Theme
{{data[0]['dotted-line-theme']['text']}}
Holo Input Theme
{{data[0]['holo-input-theme']['text']}}
Options
Option Default Value Description
iplaceholder (string) Null placeholder for input or textarea
ivalidate (string) Nullable If you want to validate before or after the submit the value, you can use this feature. Available values are text / number / email / nullable.
ierror (string) Null error message to show if validation fails.
remover (boolean) false pass true if you want Delete the element.
theme (string) basic-theme pass the theme name. Available values basic-theme / simple-button-theme / round-button-theme / dotted-line-theme / holo input theme. Or create your own custome theme and apply it.
full_length (Obejct) Object
inside (boolean)
default value : true It will cover full width of parent container if you pass true in inside part, or auto width if pass the false.
outside (boolean)
default value : true It will cover full width of parent container if you pass true in outside part, or auto width if pass the false.
full_length:{
	inside:true,
	outside:true
}
                           
outside_btn (Obejct) Object
Style the outside button
new_line (boolean)
default value : false To set outside edit button in new line.
pull (string)
default value : right float left or right for edit button
onshow (html)
default value : edit icon You can set html for outside edit button
onhover (html)
default value : Edit You can set html for outside edit button to show on hover the element.
removebtn (html)
default value : Delete icon You can set html in delete button.
outside_btn:{
    new_line:false,
    pull:'right',
    onshow:"  <i class='fa fa-pencil'></i>",
    removebtn:"  <i class='fa fa-times'></i>",
    onhover:" Edit"
}
                           
inside_btn (Obejct) Object
Style the inside button
new_line (boolean)
default value : false To set inside buttons in new line.
pull (string)
default value : right float left or right for inside buttons.
ok (html)
default value : ok icon You can set html for ok button
cancel (html)
default value : cancel icon You can set html for cancel button.
inside_btn:{
	new_line:false,
	pull:'right',
	ok:"<i class='fa fa-check'></i>",
	cancel:"<i class='fa fa-tiems'></i>"
}
                           
init (Obejct) Object
before (function)
default value : null To execute function before initialize the tmeditable (it means before set the html by plugin).
after (function)
default value : null To execute function after initialize the tmeditable (mainly used to execute external plugins ).
init:{
    before:function(){},
    after:function(){}
}
                           
ok (Obejct) Object
before (function)
default value : null To execute function before save the value (follow the format as shown in code, use of $.Deferred is necessary due to handle ajax request).
after (function)
default value : null To execute function after save the value.
 ok:{
    before:function(value){
        var deferred = $.Deferred();
        //your code start here
        alert(value) //value of element
        //your code ends here
        deferred.resolve();
        return deferred.promise();
    },
    after:function(){}
}
                           
Remove (Obejct) Object
before (function)
default value : null To execute function before delete the element (follow the format as shown in code, use of $.Deferred is necessary due to handle ajax request).
after (function)
default value : null To execute function after delete the element.
 remove:{
    before:function(){
        var deferred = $.Deferred();
        //your code start here
        alert('hello')
        //your code ends here
        deferred.resolve();
        return deferred.promise();
    },
    after:function(){}
}