适用于Dojo的QuickBoxes

对我来说，增加精神上的投资组合很重要。 首先是MooTools，然后是jQuery，现在是Dojo。 我经常与Dojo名望的Peter Higgins交谈，并决定是时候进入他的世界了。 我选择了一个简单但有用的插件QuickBoxes从MooTools移植过来。 结果如下。

观看演示

Dojo JavaScript

//safety closure
;(function(d, $){
	//plugin begins
    d.QuickBoxes = function(args, node){
		//scoping
		node = d.byId(node);
		//settings
		var active = 0;
		args.elements = $(args.elements);
		//for every checkbox
		args.elements.forEach(function(el) {
			//connect the MouseDown event
			d.connect(el,'onmousedown',function(ev){
				d.stopEvent(ev);
				active = 1;
				el.checked = !el.checked;
			});
			//connect the MouseEnter event
			d.connect(el,'onmouseenter',function(e){
				if(active == 1) {
					el.checked = ('toggle' == args.mode ? !el.checked : 'check' == args.mode);
				}
			});
			//connect the Click event
			d.connect(el,'onclick',function(e){
				el.checked = !el.checked;
				active = 0;
			});
			//fix the labels
			var label = $('label[for=' + el.getAttribute('id') + ']');
			if(label.length) {
				d.connect(label[0],'onclick',function(e){
					el.checked = !el.checked;
				});
			}
		});
		//add the mouseup event to the Window
		d.connect(d.body(),'mouseup',function(){ active = 0; });
	};	
	//usage
	d.addOnLoad(function(){
		var togglers = new d.QuickBoxes({ elements: '.toggle', mode: 'toggle' });
		var checked = new d.QuickBoxes({ elements: '.checked', mode: 'check' });
		var unchecked = new d.QuickBoxes({ elements: '.unchecked', mode: 'uncheck' });
	});
})(dojo, dojo.query);

如果您查看Dojo版本和MooTools版本，它们几乎是相同的。 就像我讲过Moo和jQuery一样，所有框架都做同样的事情，但是语法不同。

观看演示

特别感谢Peter Higgins的帮助-老实说，这个简单的插件让我有些失落。 涉足Dojo是一件好事，我期待更多的实验。

翻译自: https://davidwalsh.name/quickboxes-dojo