mootools_MooTools dwCheckboxes插件-白红宇

mootools

Update / Fix: The checkboxes will no longer toggle when the "mouseup" event doesn't occur on a checkbox.

更新/修复：当复选框上没有发生“ mouseup”事件时，复选框将不再切换。

Every morning I wake up to a bunch of emails in my Gmail inbox that I delete without reading. I end up clicking so many damn checkboxes that my finger damn near falls off. With that in mind, I've created the dwCheckboxes plugin, 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.

每天早上，我都会在Gmail收件箱中醒来一堆电子邮件，这些邮件是我删除而没有阅读的邮件。我最终单击了该死的复选框，以至于该死的手指掉了下来。考虑到这一点，我创建了dwCheckboxes插件，这是一个基于MooTools的类，它允许用户单击复选框并在其他复选框上拖动鼠标以在一次单击中选中或取消选中多个复选框。

MooTools JavaScript (The MooTools JavaScript)

var dwCheckboxes = 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; });	}});

There are two options for this mall plugin:

该商城插件有两种选择：

elements: the collection of input boxes to apply the plugins for (defaults to all checkboxes).
elements ：要为其应用插件的输入框的集合(默认为所有复选框)。

mode: one of three options: toggle, check, or uncheck (defaults to "toggle")
模式：三个选项之一：切换，选中或取消选中(默认为“切换”)

MooTools的用法 (The MooTools Usage)

//when the DOM is ready to gowindow.addEvent('domready',function() {	var togglers = new dwCheckboxes({ elements: $$('.toggle'), mode: 'toggle' });	var checked = new dwCheckboxes({ elements: $$('.checked'), mode: 'check' });	var unchecked = new dwCheckboxes({ elements: $$('.unchecked'), mode: 'uncheck' });});

翻译自:

mootools