0

kendotapstrip のオーバーフローを作成しました。

タブストリップに 3 つのタブが表示され、オーバーフローに 2 つのタブが表示されている kendotabstrip

上の図は、ブラウザ ウィンドウが縮小されたタブストリップを示しています。タブストリップには 3 つのタブがあり、オーバーフローには 2 つのタブがあります。

機能を制御するために angularJS ディレクティブを使用しています。

サイズ変更イベントをウィンドウにバインドしました。サイズ変更を開始するとすぐに resizeTabstrip() 関数が呼び出され、使用可能なスペースの量に応じてタブストリップでタブが非表示または表示されます (css スタイルを使用)。

スペースが少なすぎる場合、タブは非表示になり、オーバーフロー配列 (スコープに設定されている scope.overflowTabs[]) に追加されます。

十分なスペースがある場合、タブはオーバーフロー配列から削除され、タブストリップに再表示されます。

これは私の問題です：

サイズを上下にすばやく変更すると、タブが失われます。

ブラウザを全幅で表示しているが、タブストリップにタブが表示されていない kendotabstrip

上の写真は、ブラウザウィンドウをフルサイズで非常にすばやくサイズ変更した後のタブストリップを示していますが、タブ2がタブストリップにありません。

これは、 resizeTabstrip() 関数を呼び出すメインのサイズ変更バインドです。

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

ご覧のとおり、変数 callResizeTabstrip を 500 ミリ秒の遅延で呼び出しています。次に、この変数には 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 に答える