|
|
|
Drag-through checkboxes (libless)
3
Essentially, lets your users click a whole line of checkboxes by clicking the first and dragging down the line.
This is a crop-in script. That is to say, include it on your page, and you need do nothing else. Even primitive event handlers (element.onchange, for example) are supported, with no action on your part.
A demo of it in action is on my hosting:
http://fordi.org/test/checks.php
This is the libless version; that is to say, it is independent of and doesn't interfere with any Javascript libraries, such as jQuery, Prototype, MooTools, etc.
This is a crop-in script. That is to say, include it on your page, and you need do nothing else. Even primitive event handlers (element.onchange, for example) are supported, with no action on your part.
A demo of it in action is on my hosting:
http://fordi.org/test/checks.php
This is the libless version; that is to say, it is independent of and doesn't interfere with any Javascript libraries, such as jQuery, Prototype, MooTools, etc.
(function () {
//Minimalist cross-browser support
if (window.addEventListener) {
function observe(o,e,f) {
return o.addEventListener(e,function (e) {
return f.apply(e.target, [e]);
},false);
}
function triggerChange(o) {
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change',false,true);
o.dispatchEvent(evt);
}
function attr(o,n) { return o.getAttribute(n); }
} else if (window.attachEvent) {
function observe(o,e,f) {
return o.attachEvent('on'+e,function () {
var e = window.event;
e.originalTarget = e.srcElement;
return f.apply(e.target, [e]);
});
}
function triggerChange(o) {
o.fireEvent('onchange');
}
} else {
return;
}
//Actual program starts here
var
name=null,
value=null,
current=null,
orig=null,
to=null;
function md(e) {
to = setTimeout(function () {
mh(e);
}, 50);
if (e.originalTarget.name=='') return;
orig = e.originalTarget;
name = orig.name;
var radio = orig.type.toLowerCase() == 'radio';
if (radio)
value = true;
else
value = !this.checked;
this.checked = value;
}
function mh(e) {
if (name===null) return;
to=null;
var _$ = e.originalTarget;
if (_$.name!==name) return;
if (current!==this) {
current = this;
_$.checked = value;
triggerChange(_$);
_$.focus();
}
}
function ml() {
if (name===null) return;
current = null;
}
function up(e) {
if (to!==null) {
clearTimeout(to);
to=null;
}
if (name===null) return;
name = null;
if (e.originalTarget===orig) {
var radio = orig.type.toLowerCase() == 'radio';
if (radio)
orig.checked = true;
else
orig.checked = !value;
}
name=null;
value=null;
current=null;
orig=null;
to=null;
}
observe(window,'load',function () {
observe(document.body, 'mouseup', up);
var checks = document.body.getElementsByTagName('input');
for (var i=0; i<checks.length; i++)
if (/^(?:radio|checkbox)$/i.test(checks[i].type) && checks[i].name!=='') {
observe(checks[i], 'mousedown', md);
observe(checks[i], 'mouseover', mh);
observe(checks[i], 'mouseout', ml);
}
});
})();
//Minimalist cross-browser support
if (window.addEventListener) {
function observe(o,e,f) {
return o.addEventListener(e,function (e) {
return f.apply(e.target, [e]);
},false);
}
function triggerChange(o) {
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change',false,true);
o.dispatchEvent(evt);
}
function attr(o,n) { return o.getAttribute(n); }
} else if (window.attachEvent) {
function observe(o,e,f) {
return o.attachEvent('on'+e,function () {
var e = window.event;
e.originalTarget = e.srcElement;
return f.apply(e.target, [e]);
});
}
function triggerChange(o) {
o.fireEvent('onchange');
}
} else {
return;
}
//Actual program starts here
var
name=null,
value=null,
current=null,
orig=null,
to=null;
function md(e) {
to = setTimeout(function () {
mh(e);
}, 50);
if (e.originalTarget.name=='') return;
orig = e.originalTarget;
name = orig.name;
var radio = orig.type.toLowerCase() == 'radio';
if (radio)
value = true;
else
value = !this.checked;
this.checked = value;
}
function mh(e) {
if (name===null) return;
to=null;
var _$ = e.originalTarget;
if (_$.name!==name) return;
if (current!==this) {
current = this;
_$.checked = value;
triggerChange(_$);
_$.focus();
}
}
function ml() {
if (name===null) return;
current = null;
}
function up(e) {
if (to!==null) {
clearTimeout(to);
to=null;
}
if (name===null) return;
name = null;
if (e.originalTarget===orig) {
var radio = orig.type.toLowerCase() == 'radio';
if (radio)
orig.checked = true;
else
orig.checked = !value;
}
name=null;
value=null;
current=null;
orig=null;
to=null;
}
observe(window,'load',function () {
observe(document.body, 'mouseup', up);
var checks = document.body.getElementsByTagName('input');
for (var i=0; i<checks.length; i++)
if (/^(?:radio|checkbox)$/i.test(checks[i].type) && checks[i].name!=='') {
observe(checks[i], 'mousedown', md);
observe(checks[i], 'mouseover', mh);
observe(checks[i], 'mouseout', ml);
}
});
})();




There are currently no comments for this snippet.