Accordion: support multiple events being set at the same time

[Jörn Zaefferer]

Here is a hoverintent implementation as a special event:

var cfg = ($.hoverintent = {
	sensitivity: 7,
	interval: 100
});
	
$.event.special.hoverintent = {
	setup: function() {
		$(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
	},
	teardown: function() {
		$(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
	},
	handler: function(event) {
		event.type = "hoverintent";
		var self = this,
			args = arguments,
			target = $(event.target),
			cX, cY, pX, pY;
			

		function track(event) {
			cX = event.pageX;
			cY = event.pageY;
		};
		pX = event.pageX;
		pY = event.pageY;
		function clear() {
			target.unbind("mousemove", track).unbind("mouseout", arguments.callee);
			clearTimeout(timeout);
		}
		function handler() {
			if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
				clear();
				jQuery.event.handle.apply(self, args);
			} else {
				pX = cX; pY = cY;
				timeout = setTimeout(handler, cfg.interval);
			}
		}
		var timeout = setTimeout(handler, cfg.interval);
		target.mousemove(track).mouseout(clear);
		return true;
	}
};

Its customizable by modifying the global $.hoverintent object.

This can be used in combination with a click event:

$(...).accordion({
  event: "click hoverintent"
});

This produces a good behaviour on systems with a mouse (no click needed, barely any unintential hovers) and still works on systems without a mouse, eg. iPhone (no mouseover event).

For multiple events to get namespaced, the binding code has to be modified:

if (options.event) {
	this.element.bind(options.event.split(" ").join(".accordion ") + ".accordion", clickHandler);
}

[Jörn Zaefferer]

Also add the hoverintent example as a demo.

[Jörn Zaefferer]

Fixed in ​a3ab2b.

[Jörn Zaefferer]

Add support for multiple events, along with hoverintent demo. Fixes #3614 - Accordion: support multiple events being set at the same time

Changeset: a3ab2b223b8d7494bf860396975868644b3e89cb