鼠标悬停时懒惰加载绑定
Lazy Loading Binding On Mouse Hover
我在类似HTML Excel的大型网格中的每个单元格上使用以下绑定。现在我正在绑定到每个单元格,有没有一种方法可以做到这一点,即在鼠标悬停一定延迟后懒惰加载它,这样每个单元格都不需要激活它?如果鼠标在单元格上停留2秒钟,则工具提示绑定将激活并显示。此工具提示是引导程序工具提示。
ko.bindingHandlers.tooltip = {
init: function (element, valueAccessor) {
$(element).tooltip();
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).tooltip("destroy");
});
}
};
您可以在单元格容器上添加单个事件处理程序,而不是为每个单元格添加一个事件处理程序。给定标记
<div class="cell-container" data-bind="tooltipContainer: true">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</diV>
你可以使用这个绑定:
ko.bindingHandlers.tooltipContainer = {
init: function (element, valueAccessor) {
$(element).on('hover', '.cell', function() {
$(this).tooltip();
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).tooltip("destroy");
});
}
};
如果你想在顶部添加一个超时,这个
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");
});
}
};
应该起作用。
相关文章:
- ng绑定和ng href问题.ng href未从控制器加载数据
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 更改事件绑定's函数在页面加载时调用
- Jquery函数无法处理动态加载的内容(不是绑定函数)
- 为knockout.js数据绑定加载多个远程数据源
- 为SEO的数据绑定JS预加载数据
- 在页面重新加载后绑定事件,并仅使用Knockout.js、html和js创建新的html元素
- 使用.ech()绑定页面加载上的处理程序,并使用jQuery.clone(true,true)采用它们
- 在不增加分析跳出率的情况下,绑定网页上的内部链接以动态加载
- 为什么AngularJS在页面加载时没有自动绑定属性?包括一个非常简单的例子
- 异步加载ASP.NET绑定的Javascript,然后调用回调
- 空的数组绑定元素在页面加载时消失
- JQuery.on()绑定在重新加载部分页面后不起作用
- 使用 knockoutjs 加载绑定
- 当URL通过HTML更改时,带有jQuery密钥绑定的AngularJS指令未正确加载绑定
- AngularJS-如何在JS中加载绑定到的变量之前不显示HTML元素
- 如何在CFSelect上设置选定值并重新加载绑定的CFSelect
- 如果以异步方式加载绑定的资源,则函数中的$watch/$timeout包装会中断双向绑定
- js:如何延迟加载绑定
- 鼠标悬停时懒惰加载绑定