Tablesaw不会在Bootstrap旋转木马内触发
Tablesaw不会在Bootstrap旋转木马内触发
提问于 2016-09-01 14:04:55
我正在使用Tablesaw plugin来获取响应表。
在某种程度上，我需要在一个引导旋转木马的不同项目/幻灯片中包含不同的表。
在加载时，Carousel活动项上的表将正确显示(Tablesaw正确启动)，但当我移动到下一个幻灯片/项时，将无法正确显示其中的表(Tablesaw未启动)。
Tablesaw包含一个额外的JS文件，以便在加载时启动：
$( function(){
$( document ).trigger( "enhance.tablesaw" );
});这似乎适用于第一张幻灯片/项目，但不适用于其他幻灯片/项目。
知道为什么会发生这种事吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-05 13:55:37
问题在于表不对称。表需要在初始化期间(在tablesaw-init.js中完成)知道元素的大小。在引导旋转木马中有两个表元素，一个是活动的，另一个不是活动的。当您查看Carousel时，您可以看到，目前不活动的Carousel项的display属性被设置为none。未显示的元素将width和height设置为0。
因此，解决方案可能是将文件tablesaw-init.js中的代码更改为：
;(function($) {
$(function(){
// Show all carousel items before Tablesaw intialization
$(".carousel-inner > .item").css("display", "block");
// Initialize the Tablesaw
$( document ).trigger( "enhance.tablesaw" );
// Remove the style added before initialization
$(".carousel-inner > .item").removeAttr("style");
});
})(jQuery);在进行此更改后，不需要处理slid事件。
下面是您使用上述更改的原始代码示例，因此您可以看到它正在运行https://plnkr.co/edit/Ocd0axmKLS1KDtGYlU4K?p=preview
Stack Overflow用户
发布于 2016-09-05 14:11:02
无法在隐藏表上初始化Tablesaw。
因此，必须将自定义初始化脚本设置为只初始化可见表：
;(function($) {
$(function(){
// Initialize Tablesaw on the active carousel slide
$('#carousel-einzelwerte .item.active').trigger('enhance.tablesaw');
// Initialize Tablesaw on slide change
$('#carousel-einzelwerte').on('slid.bs.carousel', function(e) {
$(e.relatedTarget).trigger('enhance.tablesaw');
});
});
})(jQuery);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39273699
复制相关文章
相似问题
腾讯云开发者
