jQuery selecter Plugin Demos

Example

Use Selecter to make every things selectable (duh). Try select following itens:

Each item
of this list
can be selected

HTML:

<ul id="my-list" class="list-group">
    <li class="list-group-item">Each elem</li>
    <li class="list-group-item">of this list</li>
    <li class="list-group-item">can be selected</li>
</ul>

Javascript

var selecter = new Selecter('#my-list li');

Options

Selecter automatically includes the class active to the elements selected. In bootstrap, this works, but if you use other html/css framework you can just specify the class that you want to be added:

var selecter = new Selecter('#my-list li', {
    select_class: 'light-gray'
});

If you want, selecter.js can append a mark to each item selected, like an image:

new Selecter('#ex-02 li', {
    add_mark: true,
    mark_html: '<img width="32" style="position: absolute; top: -5px; right: -5px;" class="__mark_icon" src="imgs/check.png">',
    mark_class: '__mark_icon',
    select_class: ''
});

Each item
of this list
can be selected

callbacks

You want to do something when at least one element in the list is selected, like enable edition/remove buttons? Easy, just include on_at_least_one_selection option in constructor. Use control to select items

var selecter = new Selecter('#ex-03 li', {
    add_mark: true,
    mark_html: '<img width="32" style="position: absolute; top: -5px; right: -5px;" class="__mark_icon" src="imgs/check.png">',
    mark_class: '__mark_icon',
    enable_ctrl: true,
    select_class: 'light-grey',
    on_at_least_one_selection: function() {
        $('#btn-move,#btn-delete').removeClass('disabled');
    },
    on_unselecting_all: function() {
        $('#btn-move,#btn-delete').addClass('disabled');
    }
});
$('#btn-unselect').click(function() {
    selecter.unselect_all();
});
$('#btn-select').click(function() {
    selecter.select_all();
});