简体   繁体   English

鼠标悬停时的延迟加载绑定

[英]Lazy Loading Binding On Mouse Hover

I am using the following binding on each cell in a large HTML Excel like grid. 我在大型HTML Excel(如网格)中的每个单元格上使用以下绑定。 Right now I am binding to every cell, is there a way to do this with lazy loading it on mouse hover over a certain delay so each cell doesnt need to activate it? 现在我绑定到每个单元格,有没有办法通过将鼠标悬停在鼠标悬停某个特定的延迟上来做到这一点,因此每个单元格都不需要激活它? If the mouse is over the cell for say 2 seconds, the tooltip binding activates and is shown. 如果鼠标悬停在该单元格上2秒钟,则会激活工具提示绑定并显示。 This tooltip is the bootstrap tooltip. 该工具提示是引导工具提示。

 ko.bindingHandlers.tooltip = {
        init: function (element, valueAccessor) {
            $(element).tooltip();

            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).tooltip("destroy");
            });
        }
    };

Instead of adding one event handler per cell, you could add a single event handler on the cells container. 可以为每个单元格添加一个事件处理程序,而不是为每个单元格添加一个事件处理程序。 Given the markup 给定标记

<div class="cell-container" data-bind="tooltipContainer: true">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</diV>

you could use this binding: 您可以使用以下绑定:

ko.bindingHandlers.tooltipContainer = {
    init: function (element, valueAccessor) {
        $(element).on('hover', '.cell', function() {
          $(this).tooltip();
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).tooltip("destroy");
        });
    }
};

If you want to add a timeout on top, this 如果您想在顶部添加超时,则此

ko.bindingHandlers.tooltipContainer = {
    init: function (element, valueAccessor) {
        $(element).on('hover', '.cell', function() {
          var $this    = $(this),
              callback = function() { $this.tooltip(); };

          setTimeout(callback, 2000);
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).tooltip("destroy");
        });
    }
};

should work. 应该管用。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM