https://github.com/gettocat/items
minimalistic js library to manage items list.
https://github.com/gettocat/items
Last synced: about 2 months ago
JSON representation
minimalistic js library to manage items list.
- Host: GitHub
- URL: https://github.com/gettocat/items
- Owner: gettocat
- License: mit
- Created: 2015-08-12T20:14:11.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-11-27T07:27:17.000Z (over 9 years ago)
- Last Synced: 2024-10-05T22:04:13.437Z (8 months ago)
- Language: HTML
- Size: 47.9 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# items lib
Minimalistic js library to manage items list. [View live demo](http://gettocat.github.io/items/)
### Installation
* add to you page items.css and items.js
* init library:
```js
var itms = new items();
```
* add class item to listed elements.
* add item-header and item-footer, if this need.
For example:
```html
```
### Methods
```js
itms.select(el); // select element
itms.unselect(el); //remove selection on element
itms.selectAll(); //select all elements
itms.unselectAll(); //remove selection from all elements
```
### Callbacks
```js
itms.onHasSelected(function() {
//action on one or more selected items
});
itms.onHasNoSelected(function() {
//action on zero selected items
});
itms.onSelect(function() {
//action on new selected item
});
itms.onUnSelect(function() {
//action on new onselected item
});
itms.getSelected(function(el) { // this callback will be triggered on each selected item
var id = $(el).data("id"); //for example - get id of item from data-id
fake_ajax(function(resp) {//send async query
itms2.unselect(el);//unselect item
if (resp.status == 1)
$(el).remove();//and remove it from list
});
});
itms.getAllSelected(function(arr){
//arr is Array of $(element);
});
itms.getAllSelectedAttr('id', function(arr){
//arr is Array of value data-id of elements
});
```
### Advanced usage
If you need a more then one list on page, use this code:
```js
var itm11 = new items("#tags");//#tag its a selector, where search elements of this list, by default - document.
var itms2 = new items("#categoryes");
```
### Constructor params
```js
var itm1 = new items("#tags", {
scope: "Selected items: ",//text of footer items.
item_selector: '.item',//selector of one item
active_item_class: 'item-selected', //class, adding to selected item
header_selector: ".item-header",//list header selector
footer_selector: ".item-footer",//list footer selector
});
```