Quickboxes
A MooTools-based class that allows users to click down on a checkbox and drag their mouse over other checkboxes to check or uncheck numerous checkboxes within one click.
Download Debut Article Example Usage
Plugin Code (Version 1.0)
var Quickboxes = new Class({
//implements
Implements: [Options],
//options
options: {
elements: 'input[type=checkbox]', //checkboxes to use
mode: 'toggle' //toggle|check|uncheck
},
//initialization
initialize: function(options) {
//set options
this.setOptions(options);
//prevent drag start in IE
document.ondragstart = function () { return false; }
//ensure that the elements are a Element
this.options.elements = $$(this.options.elements);
//manage the checkbox actions
this.manage();
},
//a method that does whatever should be done
manage: function() {
var active = 0;
this.options.elements.each(function(el) {
el.addEvents({
'mousedown': function(e) {
e.stop();
active = 1;
el.checked = !el.checked;
},
'mouseenter': function(e) {
if(active === 1) {
el.checked = ('toggle' == this.options.mode ? !el.checked : 'check' == this.options.mode);
}
}.bind(this),
'click': function(e) {
el.checked = !el.checked;
active = 0;
}
});
}.bind(this));
var label = $$('label[for=' + el.get('id') + ']');
if(label.length) {
label[0].addEvent('click',function() {
el.checked = !el.checked;
});
}
window.addEvent('mouseup',function() { active = 0; });
}
});
/* example usage */
//when the DOM is ready to go
window.addEvent('domready',function() {
var togglers = new Quickboxes({ elements: $$('.toggle'), mode: 'toggle' });
var checked = new Quickboxes({ elements: $$('.checked'), mode: 'check' });
var unchecked = new Quickboxes({ elements: $$('.unchecked'), mode: 'uncheck' });
});
Options
- elements: (defaults to all checkbox elements) the collection of input boxes to apply the plugin to
- mode: (defaults to "toggle")one of three options: toggle, check, or uncheck (defaults to 'toggle')
Code Revisions & Bug Fixes
None.
