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 |
|---|