This time I will share jQuery Plugin and tutorial about Lightweight jQuery Plugin To Create CRUD Elements – Crudable, hope it will help you in programming stack.
| File Size: | 7.81 KB |
|---|---|
| Views Total: | 2072 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Crudable is a small and simple-to-use jQuery plugin for creating CRUD elements that allows you to dynamically add / duplicate / remove / update any html elements in tables, lists or forms.
How to use it:
1. Download and load the jQuery Crudable plugin after loading jQuery library.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="crudable.js"></script> |
2. Create a basic CRUD table with ‘add’ and ‘remove’ buttons.
01 |
<table> |
02 |
<tbody> |
03 |
<tr class="crudable"> |
04 |
<td> |
05 |
HTML Element Here |
06 |
</td> |
07 |
<td> <div class="crudable-create"> + </div> </td> |
08 |
<td> <div class="crudable-delete"> - </div> </td> |
09 |
</tr> |
10 |
</tbody> |
11 |
</table> |
1 |
$('.crudable').crudable(); |
3. The plugin also supports nested elements.
01 |
<div class="table-day"> |
02 |
<table> |
03 |
<thead> |
04 |
<tr> |
05 |
<th> |
06 |
<div> |
07 |
<label for="date"> Date </label> |
08 |
<inputvalue="A tour near city" name="date" type="text"> |
09 |
</div> |
10 |
</th> |
11 |
<th> |
12 |
<a class="create-day">Add a new day </a> |
13 |
<a class="delete-day">Delete this day</a> |
14 |
</th> |
15 |
</tr> |
16 |
</thead> |
17 |
<tbody> |
18 |
<tr class="crudable"> |
19 |
<td> |
20 |
<div> |
21 |
<label> Plan </label> |
22 |
<inputvalue="" name="plan" type="text"> |
23 |
</div> |
24 |
</td> |
25 |
<td> |
26 |
<div> |
27 |
<label> Time </label> |
28 |
<input value="" name="time" type="text"> |
29 |
</div> |
30 |
</td> |
31 |
<td> |
32 |
<div class="crudable-create">+</div> |
33 |
</td> |
34 |
<td> |
35 |
<div class="crudable-delete">-</div> |
36 |
</td> |
37 |
</tr> |
38 |
</tbody> |
39 |
</table> |
40 |
</div> |
1 |
$('.table-day').crudable({ |
2 |
crudableLabel: "table-day", |
3 |
createLabel: "create-day", |
4 |
deleteLabel: "delete-day", |
5 |
afterCreate: function(element) { |
6 |
element.find('.crudable').crudable(); |
7 |
}, |
8 |
}); |
4. Default plugin settings.
01 |
// selectors |
02 |
createLabel: "crudable-create", |
03 |
deleteLabel: "crudable-delete", |
04 |
crudableLabel: "crudable", |
05 |
06 |
// callbacks |
07 |
beforeCreate: $.noop, |
08 |
afterCreate: $.noop, |
09 |
beforeDelete: $.noop, |
10 |
afterDelete: $.noop, |
This awesome jQuery plugin is developed by schwannden. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
