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