问题
I am attempting to add HoverIntent to jQuery tabs. However it is not working, my code is bellow. Any tips? Thank you.
Code taken straight from jQuery UI website. (Doesnt't Work)
source: http://jqueryui.com/accordion/#hoverintent
demo: http://jsfiddle.net/Ch7sL/
-- JS --
$( "#tabs" ).tabs({
event: "click hoverintent"
});
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 ) {
var that = 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();
event.type = "hoverintent";
event.originalEvent = {};
jQuery.event.handle.apply( that, args );
} else {
pX = cX;
pY = cY;
timeout = setTimeout( handler, cfg.interval );
}
}
var timeout = setTimeout( handler, cfg.interval );
target.mousemove( track ).mouseout( clear );
return true;
}
};
回答1:
Needed to call javascript onDomready rather then onLoad. And add jQuery Migrate after jQuery in order for HoverIntent to Work.
Updated Code:
$(function() {
$( "#tabs" ).tabs({
event: "click hoverintent"
});
});
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 ) {
var that = 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();
event.type = "hoverintent";
event.originalEvent = {};
jQuery.event.handle.apply( that, args );
} else {
pX = cX;
pY = cY;
timeout = setTimeout( handler, cfg.interval );
}
}
var timeout = setTimeout( handler, cfg.interval );
target.mousemove( track ).mouseout( clear );
return true;
}
};
updated jsFiddle: http://jsfiddle.net/uPWLn/
回答2:
This thread is old and the code provided is deprecated due to changes in JQuery 1.9.1 and current versions (3.5.1).
While there are several other jquery-hoverintent discussions on the web, e.g.
[StackOverflow] Delay jquery hover event?
... this thread is good as it directly addresses Ajax and the JQuery .tabs() ecosystem, here with hoverIntent.js.
I wanted to get this approach / code working for my project, so I dumped @eric-goncalves excellent JSFiddle (other answer, here) into a HTML file and debugged it.
As a Javascript novice I'm not sure that this code is the best current approach to JQuery ui-tab delayed loading (noting again the much-upvoted StackOverflow discussion linked above).
I was not able to implement that example due to the specific applications embedded into that code and the lack of a working copy, obfuscating it's generalization.
However I was able to implement Eric Goncalves's code, which I provide below as a complete, working copy. :-)
- JSFiddle: https://jsfiddle.net/mvo6n9tc/1/
<!DOCTYPE html>
<html encoding="UTF-8" charset="UTF-8" lang="en-US" language="English" xmlns="https://www.w3.org/1999/xhtml/" itemtype="http://schema.org/WebPage">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<link rel="shortcut icon" href="#">
<title>Adding hoverintent to JQuery ui-tabs</title>
<!-- https://stackoverflow.com/questions/15346939/adding-hoverintent-to-jquery-ui-tabs -->
<!-- ALL JQUERY VERSIONS: https://code.jquery.com/jquery/ -->
<!-- <script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script> -->
<!-- COMMENT: all three of these JQuery scripts are required. Note COMMENTS -->
<!-- in code for updates from jquery-1.9.1.min.js >> jquery-3.5.1.min.js -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script type = "text/javascript">
$(init);
function init(){
$("#tabs").tabs({event: "click hoverintent"});
}; /* init(){} */
var cfg = ($.hoverintent = {
sensitivity: 3,
interval: 400
}); /* cfg */
$.event.special.hoverintent = {
setup: function() {
$( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
}, /* setup (){} */
teardown: function() {
$( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
}, /* teardown */
handler: function( event ) {
var that = this,
args = arguments,
target = $( event.target ),
cX, cY, pX, pY;
function track( event ) {
cX = event.pageX;
cY = event.pageY;
}; /* track */
pX = event.pageX;
pY = event.pageY;
function clear() {
target
.unbind( "mousemove", track )
.unbind( "mouseout", arguments.callee );
clearTimeout( timeout );
} /* clear */
function handler() {
if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
clear();
event.type = "hoverintent";
// prevent accessing the original event since the new event
// is fired asynchronously and the old event is no longer
// usable (#6028)
//
// COMMENT [2021-01-20]:
// "Uncaught TypeError: e.preventDefault is not a function"
// SWITCHING FROM JQuery 1.9.1 to 3.5.1 comment out this line:
//
// event.originalEvent = {};
// COMMENT [2021-01-20]:
// "Uncaught TypeError: jQuery.event.handle is undefined"
// jQuery.event.handle is deprecated; you can use $.event.dispatch instead.
// https://stackoverflow.com/questions/16527658/jquery-error-typeerror-event-handle-is-undefined
//
// jQuery.event.handle.apply( that, args );
jQuery.event.dispatch.apply( that, args );
} /* if */
else {
pX = cX;
pY = cY;
timeout = setTimeout( handler, cfg.interval );
} /* else */
} /* handler (inner) */
var timeout = setTimeout( handler, cfg.interval );
target.mousemove( track ).mouseout( clear );
return true;
} /* handler (outer) */
}; /* event.special.hoverintent */
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. </p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. </p>
</div>
</div>
</body>
</html>
来源：https://stackoverflow.com/questions/15346939/adding-hoverintent-to-jquery-ui-tabs