Skip to content

Commit a3ab2b2

Browse files
jzaeffererjzaefferer
committed
Add support for multiple events, along with hoverintent demo. Fixes #3614 - Accordion: support multiple events being set at the same time
1 parent 66659a1 commit a3ab2b2

File tree

3 files changed

+135
-1
lines changed

3 files changed

+135
-1
lines changed

‎demos/accordion/hoverintent.html

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>jQuery UI Accordion - Default functionality</title>
6+
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7+
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8+
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9+
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10+
<script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
11+
<link type="text/css" href="../demos.css" rel="stylesheet" />
12+
<script type="text/javascript">
13+
14+
var cfg = ($.hoverintent = {
15+
sensitivity: 7,
16+
interval: 100
17+
});
18+
19+
$.event.special.hoverintent = {
20+
setup: function() {
21+
$(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
22+
},
23+
teardown: function() {
24+
$(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
25+
},
26+
handler: function(event) {
27+
event.type = "hoverintent";
28+
var self = this,
29+
args = arguments,
30+
target = $(event.target),
31+
cX, cY, pX, pY;
32+
33+
function track(event) {
34+
cX = event.pageX;
35+
cY = event.pageY;
36+
};
37+
pX = event.pageX;
38+
pY = event.pageY;
39+
function clear() {
40+
target.unbind("mousemove", track).unbind("mouseout", arguments.callee);
41+
clearTimeout(timeout);
42+
}
43+
function handler() {
44+
if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
45+
clear();
46+
jQuery.event.handle.apply(self, args);
47+
} else {
48+
pX = cX; pY = cY;
49+
timeout = setTimeout(handler, cfg.interval);
50+
}
51+
}
52+
var timeout = setTimeout(handler, cfg.interval);
53+
target.mousemove(track).mouseout(clear);
54+
return true;
55+
}
56+
};
57+
58+
59+
$(function() {
60+
$("#accordion").accordion({
61+
event: "click hoverintent"
62+
});
63+
});
64+
</script>
65+
</head>
66+
<body>
67+
68+
<div class="demo">
69+
70+
<div id="accordion">
71+
<h3><a href="#">Section 1</a></h3>
72+
<div>
73+
<p>
74+
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
75+
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
76+
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
77+
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
78+
</p>
79+
</div>
80+
<h3><a href="#">Section 2</a></h3>
81+
<div>
82+
<p>
83+
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
84+
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
85+
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
86+
suscipit faucibus urna.
87+
</p>
88+
</div>
89+
<h3><a href="#">Section 3</a></h3>
90+
<div>
91+
<p>
92+
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
93+
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
94+
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
95+
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
96+
</p>
97+
<ul>
98+
<li>List item one</li>
99+
<li>List item two</li>
100+
<li>List item three</li>
101+
</ul>
102+
</div>
103+
<h3><a href="#">Section 4</a></h3>
104+
<div>
105+
<p>
106+
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
107+
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
108+
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
109+
mauris vel est.
110+
</p>
111+
<p>
112+
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
113+
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
114+
inceptos himenaeos.
115+
</p>
116+
</div>
117+
</div>
118+
119+
</div><!-- End demo -->
120+
121+
<div class="demo-description">
122+
<p>
123+
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
124+
Optionally, toggle sections open/closed on mouseover.
125+
</p>
126+
<p>
127+
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
128+
usable without JavaScript.
129+
</p>
130+
</div><!-- End demo-description -->
131+
132+
</body>
133+
</html>

‎demos/accordion/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ <h4>Examples</h4>
1414
<li><a href="no-auto-height.html">No auto height</a></li>
1515
<li><a href="collapsible.html">Collapse content</a></li>
1616
<li><a href="mouseover.html">Open on mouseover</a></li>
17+
<li><a href="hoverintent.html">Open on hoverintent</a></li>
1718
<li><a href="custom-icons.html">Customize icons</a></li>
1819
<li><a href="sortable.html">Sortable</a></li>
1920
</ul>

‎ui/jquery.ui.accordion.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ $.widget("ui.accordion", {
117117
this.headers.find('a').attr('tabIndex','-1');
118118

119119
if (o.event) {
120-
this.headers.bind((o.event) + ".accordion", function(event) {
120+
this.headers.bind(o.event.split(" ").join(".accordion ") + ".accordion", function(event) {
121121
self._clickHandler.call(self, event, this);
122122
event.preventDefault();
123123
});

0 commit comments

Comments
 (0)