aboutsummaryrefslogtreecommitdiffstats
path: root/97suifangqa/staticfiles/plugins/jquery-ui/demos/accordion/hoverintent.html
diff options
context:
space:
mode:
Diffstat (limited to '97suifangqa/staticfiles/plugins/jquery-ui/demos/accordion/hoverintent.html')
-rw-r--r--97suifangqa/staticfiles/plugins/jquery-ui/demos/accordion/hoverintent.html148
1 files changed, 148 insertions, 0 deletions
diff --git a/97suifangqa/staticfiles/plugins/jquery-ui/demos/accordion/hoverintent.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/accordion/hoverintent.html
new file mode 100644
index 0000000..0ff63a3
--- /dev/null
+++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/accordion/hoverintent.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Accordion - Open on hoverintent</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.9.1.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.accordion.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "#accordion" ).accordion({
+ event: "click hoverintent"
+ });
+ });
+
+ /*
+ * hoverIntent | Copyright 2011 Brian Cherne
+ * http://cherne.net/brian/resources/jquery.hoverIntent.html
+ * modified by the jQuery UI team
+ */
+ $.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 ) {
+ var currentX, currentY, timeout,
+ args = arguments,
+ target = $( event.target ),
+ previousX = event.pageX,
+ previousY = event.pageY;
+
+ function track( event ) {
+ currentX = event.pageX;
+ currentY = event.pageY;
+ };
+
+ function clear() {
+ target
+ .unbind( "mousemove", track )
+ .unbind( "mouseout", clear );
+ clearTimeout( timeout );
+ }
+
+ function handler() {
+ var prop,
+ orig = event;
+
+ if ( ( Math.abs( previousX - currentX ) +
+ Math.abs( previousY - currentY ) ) < 7 ) {
+ clear();
+
+ event = $.Event( "hoverintent" );
+ for ( prop in orig ) {
+ if ( !( prop in event ) ) {
+ event[ prop ] = orig[ prop ];
+ }
+ }
+ // Prevent accessing the original event since the new event
+ // is fired asynchronously and the old event is no longer
+ // usable (#6028)
+ delete event.originalEvent;
+
+ target.trigger( event );
+ } else {
+ previousX = currentX;
+ previousY = currentY;
+ timeout = setTimeout( handler, 100 );
+ }
+ }
+
+ timeout = setTimeout( handler, 100 );
+ target.bind({
+ mousemove: track,
+ mouseout: clear
+ });
+ }
+ };
+ </script>
+</head>
+<body>
+
+<div id="accordion">
+ <h3>Section 1</h3>
+ <div>
+ <p>
+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+ ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+ amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+ odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+ </p>
+ </div>
+ <h3>Section 2</h3>
+ <div>
+ <p>
+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+ purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+ velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+ suscipit faucibus urna.
+ </p>
+ </div>
+ <h3>Section 3</h3>
+ <div>
+ <p>
+ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
+ Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
+ ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
+ lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
+ </p>
+ <ul>
+ <li>List item one</li>
+ <li>List item two</li>
+ <li>List item three</li>
+ </ul>
+ </div>
+ <h3>Section 4</h3>
+ <div>
+ <p>
+ Cras dictum. Pellentesque habitant morbi tristique senectus et netus
+ et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
+ faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
+ mauris vel est.
+ </p>
+ <p>
+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+ inceptos himenaeos.
+ </p>
+ </div>
+</div>
+
+<div class="demo-description">
+<p>
+Click headers to expand/collapse content that is broken into logical sections, much like tabs.
+Optionally, toggle sections open/closed on mouseover.
+</p>
+<p>
+The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
+usable without JavaScript.
+</p>
+</div>
+</body>
+</html>