Jquery <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<div class="tm_editable_container input-group theme1" id="text_demo" data-iplaceholder="Type Something..">
<input type="text" value ="This is text field" />
</div>
$('.text_demo').tm_editbale('init',{});
Html Elements | Markup |
---|---|
Input Text |
<div class="tm_editable_container input-group theme1" id="text_demo" data-iplaceholder="Type Something.."> |
Textarea |
<div class="tm_editable_container input-group" id="textarea_demo" data-iplaceholder="Type Something.." > |
Checkbox |
<div class="tm_editable_container input-group" id="checkbox_demo"> |
Radio |
<span class="radio_container full_row"> <span class="single_radio full_row"> |
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> |
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']}} |
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(){} } |