3

ウィンドウのサイズと向きに基づいて、さまざまなレイアウトを設定しようとしています。1 つのタイルは残りのタイルよりも大きく、「最大化された」タイルと見なされます。残りは「最小化」されます。「最小化」されたタイルをクリックすると、「最大化」された位置と入れ替わります。

動作: タイルを交換せずにレイアウトを変更するだけで、すべてが正しくなり、最大のタイル位置が「最大化された」タイルと見なされます。

動作しない: 最初に「最小化」タイルをクリックして「最大化」タイルと交換し、レイアウトを変更すると、タイル マネージャーは「最大化」タイルを保持するために不適切な位置を使用します。

最大化されたタイル インデックスは、アイテム リスト内のどのタイル構成が最大化されたタイルであるかを参照する必要がありますが、タイルが交換されると、これが変化するように見えます。

JSFIDDLE: http://jsfiddle.net/seadonk/72apwsb2/ 

     var optionsWide = {
                items: [
                    { rowIndex: 0, colIndex: 1, rowSpan: 3, colSpan: 6 },
                    { rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 1, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 }
                ],
                minimizedState: ':not(.maximizedContainer)',
                maximizedState: ':not(.minimizedContainer)',
                maximizedTileIndex: 0,
     };

     var optionsNarrow = {
                items: [
                    { rowIndex: 0, colIndex: 0, rowSpan: 6, colSpan: 3 },
                    { rowIndex: 6, colIndex: 0, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 6, colIndex: 1, rowSpan: 1, colSpan: 1 },
                    { rowIndex: 6, colIndex: 2, rowSpan: 1, colSpan: 1 }
                ],
                minimizedState: ':not(.maximizedContainer)',
                maximizedState: ':not(.minimizedContainer)',
                maximizedTileIndex: 0,
     };

     $(function () {         
         $('#layoutContainer').igTileManager(optionsWide);
         $('#wideBtn').click(function () {
             $('#layoutContainer').igTileManager(optionsWide);
         });
         $('#narrowBtn').click(function () {
             $('#layoutContainer').igTileManager(optionsNarrow);
         });
     });

4

1 に答える 1

2

ボタンをクリックすると、タイル構成が更新され、既存の構成とマージされます。最初にウィジェットを破棄してから、新しい構成で初期化すると、サンプルが機能します。あなたのフィドルを更新しました。

 $(function () {         
     $('#layoutContainer').igTileManager(optionsWide);
     $('#wideBtn').click(function () {
         $('#layoutContainer').igTileManager("destroy");
         $('#layoutContainer').igTileManager(optionsWide);
     });
     $('#narrowBtn').click(function () {
         $('#layoutContainer').igTileManager("destroy");
         $('#layoutContainer').igTileManager(optionsNarrow);
     });
 });
于 2015-04-28T06:14:17.637 に答える