listManager 0.2

List Manager helps you with adding and removing rows in a list. The list can be made with div's or li's elements.



Details

Author
jnbdz
Current version
0.2
GitHub
jnbdz/listManager
Downloads
2221
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: core/1.3: '*'

How to use

To initialise it:

new listManager(el[, options]);

Methods:

.add([options]);

AND

.remove(target);

AND

.removeAll();

Options:

  • listElement: The element you want to use for the rows.
  • addWhere: From the target, where you want the new row to be. You can use: top, bottom, after and before.
  • rowHTML: What HTML you want to see in the row.
  • target: The element where the new row will position it self from.
  • noTargetAddWhere: If there is no target define in the add method. You can use: top, bottom, after and before.

You can change the options when using the .add([options]) method.

Events:

  • onAddedRow: Activated when a new row is added. You get the added row.
  • onRemovedRow: Activated when a row is removed. You get the removed row.
  • onRemovedAllRows: Activated when a all the rows are removed. You get a array of all the rows you removed.

Tips:

This is a small script to help add buttons to add and remove a row inside a row.

var rowContent = function() {

var content = new Element('span', {'text': (new Date())});

var removeButton = new Element('a', {
                    'href': '#',
                    'class': 'listmanager-remove-row',
                    'html': '-',
                    'events': {
                        'click': function(el){
                                list.remove(document.id(el.target).getParent('.listmanager-row'));
                            }
                    }
                });

var addButton = new Element('a', {
                    'href': '#',
                    'class': 'listmanager-add-row',
                    'html': '+',
                    'events': {
                        'click': function(el){
                                list.add({
                                    'rowHTML': rowContent(),
                                    'target': document.id(el.target).getParent('.listmanager-row')
                                });
                            }
                    }
                });

return [addButton, removeButton, content];

};


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus