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