将HoverIntent添加到jQuery UI选项卡 [英] Adding HoverIntent to jQuery UI Tabs

问题描述

我正在尝试将HoverIntent添加到jQuery选项卡.但是，它不起作用，我的代码如下.有小费吗?谢谢.

直接从jQuery UI网站获取的代码. (无效)

来源: http://jqueryui.com/accordion/#hoverintent

演示: 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;
    }
  };

解决方案

需要调用javascript onDomready ，而不是onLoad.并在jQuery之后添加 jQuery Migrate ，以使 HoverIntent 正常工作.

更新的代码:

$(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;
}
};

更新了jsFiddle: http://jsfiddle.net/uPWLn/

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;
    }
  };

解决方案

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/

这篇关于将HoverIntent添加到jQuery UI选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！