Search and Top Navigation
#3614 closed feature (fixed)
Opened November 20, 2008 08:38AM UTC
Closed July 14, 2010 05:41PM UTC
Last modified November 19, 2010 06:26PM UTC
Accordion: support multiple events being set at the same time
Reported by: | jzaefferer | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 1.8.3 |
Component: | ui.accordion | Version: | 1.6rc2 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
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); }
Attachments (0)
Change History (9)
Changed November 20, 2008 08:41AM UTC by comment:1
description: | 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). → 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); \ } \ }}} |
---|
Changed November 30, 2008 01:27PM UTC by comment:2
milestone: | TBD → 1.next |
---|
Changed July 12, 2010 12:25PM UTC by comment:3
summary: | accordion: couple click and hoverintent (instead of mouseover) → Accordion: support multiple events being set at the same time |
---|---|
type: | bug → feature |
Changed July 14, 2010 04:53PM UTC by comment:4
Also add the hoverintent example as a demo.
Changed July 14, 2010 04:53PM UTC by comment:5
milestone: | 1.next → 1.9 |
---|
Changed July 14, 2010 05:41PM UTC by comment:7
resolution: | → fixed |
---|---|
status: | new → closed |
Changed August 04, 2010 01:25AM UTC by comment:8
milestone: | 1.9 → 1.8.3 |
---|