This time I will share jQuery Plugin and tutorial about Tiny Text Inline Editing Plugin With jQuery – InlineEdit, hope it will help you in programming stack.
| File Size: | 469 KB |
|---|---|
| Views Total: | 2752 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
InlineEdit is a really simple jQuery plugin that turns your text into a text field (input or textarea) for instant inline editing.
How to use it:
1. Include the latest version of jQuery library and the jQuery InlineEdit plugin’s script at the bottom of the webpage.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="src/jquery.inline-edit.js"></script> |
2. Include the jQuery resize plugin for auto growing input filed and textarea.
1 |
<script src="src/jquery.autoresize.js"></script> |
3. Basic usage.
01 |
<h2 class="editable" |
02 |
data-connect-with="title" |
03 |
data-max-length="50" |
04 |
data-input-type="input"> |
05 |
Click me to edit |
06 |
</h2> |
07 |
08 |
<p class="editable" |
09 |
data-connect-with="username" |
10 |
data-max-length="50"> |
11 |
Click me to edit |
12 |
</p> |
1 |
$('.editable').inlineEdit(); |
4. Advanced usage.
1 |
<div id="limitText"> |
2 |
Click me to edit |
3 |
</div> |
1 |
$('#limitText').inlineEdit({ |
2 |
showCounter: true, |
3 |
maxLength: 100, |
4 |
defaultText: true, |
5 |
inputType: 'input' |
6 |
}); |
4. All configuration options which can be passed via either JavScript or data attributes.
01 |
$('#text-wrapper').inlineEdit({ |
02 |
03 |
//Css class when hover on editable item |
04 |
hoverClass: 'hover', |
05 |
06 |
//Show or hide counter in case set max length |
07 |
showCounter: false, |
08 |
09 |
//Input type, textarea or input type text |
10 |
inputType: 'textarea', |
11 |
12 |
//Maxth length of this input |
13 |
maxLength: false, |
14 |
15 |
//Connect with an input |
16 |
connectWith: '#createOne', |
17 |
18 |
//Default text |
19 |
defaultText: false |
20 |
21 |
}); |
5. Callback functions.
01 |
$('#text-wrapper').inlineEdit({ |
02 |
03 |
//Function on up<a href="https://www.jqueryscript.net/time-clock/">date</a> hidden field |
04 |
onUpdate: function() { |
05 |
}, |
06 |
07 |
//Function on focus to ediable element |
08 |
onFocus: function() { |
09 |
}, |
10 |
|
11 |
//Function call on key down on input field |
12 |
onKeyDown: function() { |
13 |
}, |
14 |
15 |
}); |
This awesome jQuery plugin is developed by phuong. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
