+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>jQuery UI Accordion - Open on hoverintent</title>
- <link rel="stylesheet" href="../../themes/base/all.css">
- <script src="../../external/jquery/jquery.js"></script>
- <script src="../../ui/core.js"></script>
- <script src="../../ui/widget.js"></script>
- <script src="../../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 ).on( "mouseover", jQuery.event.special.hoverintent.handler );
- },
- teardown: function() {
- $( this ).off( "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
- .off( "mousemove", track )
- .off( "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.on({
- 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>
projects / jquery-ui.git / commitdiff