0

我为 kendotapstrip 创建了一个溢出：

kendotabstrip 在标签条上显示 3 个标签，在溢出中显示 2 个标签

上图显示了浏览器窗口收缩的标签条。三个标签在标签条上，两个标签在溢出中。

我正在使用 angularJS 指令来控制功能。

我已将调整大小事件绑定到窗口。一旦您开始重新调整大小，就会调用 resizeTabstrip() 函数，并根据可用空间量在 tabstrip 上隐藏或显示选项卡（使用 css 样式）。

如果空间太小，则隐藏选项卡并将其添加到溢出数组（在作用域上设置，scope.overflowTabs[]）。

如果有足够的空间，则从溢出数组中删除选项卡并重新显示在选项卡上。

这是我的问题：

如果你真的快速地重新调整大小，标签就会丢失：

kendotabstrip 以全宽显示浏览器，但 tabstrip 中缺少标签

上图显示了在浏览器窗口为全尺寸的情况下快速调整大小后的标签条，但标签条中缺少标签 2。

这是调用 resizeTabstrip() 函数的主要调整大小绑定：

            angular.element(myWindow).bind('resize', function(e) {                    
                setTimeout(function() {
                    callResizeTabstrip();                        
                },500);
            });

如您所见，我正在调用一个延迟为 500 毫秒的变量 callResizeTabstrip。该变量依次分配给 resizeTabstrip() 的函数调用：

            var callResizeTabstrip = _.throttle(function(e) {
                resizeTabstrip();
            }, 500); // Maximum run of once per 500 milliseconds

resizeTabstrip() 位于 underscore.js _.throttle 函数中，确保每 500 毫秒调用一次。

在主引擎 resizeTabstrip() 函数内部，我这样做：

            function resizeTabstrip() {
               // get the tabstrip...
               // calculate the amount of space... <-- THE PROBLEM IS HERE I THINK
               // if very little space then...
               scope.moveTabToOverflow(tabstripId, tabTitle);
               // else if enough space
               scope.moveTabFromOverflow(tabstripId, scope.overflowTabs[tabstripId]);                    
            }

对于每次调整大小（并且调整大小事件被触发 LOADS），都会进行大量计算。这是我认为问题的原因。事情发展得太快，浏览器无法处理。

有没有人对我如何解决这个问题有任何建议？

4

1 回答 1

0

好的，我找到了答案：在超时结束时触发一个自定义事件，检查标签条并刷新它，以便所有标签都存在且正确。

使用自定义事件 (resizeEnd) 实现了触发器。

            angular.element(myWindow).bind('resize', function(e) {
                setTimeout(function() {
                    callResizeTabstrip(); // the main function
                    $(this).trigger('resizeEnd'); // my custom event called afterwards
                },1000); // delay for 1 second
            });

然后我将此自定义事件绑定到窗口。它获取选项卡条上的所有选项卡（隐藏和可见）并基本上重新加载它们：

            angular.element(myWindow).bind('resizeEnd', function() {
                // get the tabstrip using a jquery selector
                // get the id of the tabstrip, also using jquery ([attr="id"]            
                // get all tabs on this tabstrip but not tabs in the overflow
                var tabs = $('[id='+tabstripId+']               
                                          li:not(#overflowTab'+tabstripId+')');                     

                    $.each(tabs, function(index, tab) { // for each tab
                        // show the tab (css display: block)
                        showTabOnTabstrip(tabstripId, index); // ensures all tabs are placed back on the tabstrip                           
                    });                                      
            });
于 2013-10-04T13:49:11.377 回答