Question

我正在尝试根据窗口大小和方向设置不同的布局。一块瓷砖比其余瓷砖大，被认为是“最大化”瓷砖。其余的都是“最小化的”。当我点击“最小化”的图块时，它会将其与“最大化”位置交换。

WORKS： 如果我不交换任何瓷砖，只是更改布局，那么一切都是正确的，最大的瓷砖位置被认为是“最大化”瓷砖。

不工作： 如果我首先点击“最小化”图块将其与“最大化”图块交换，然后更改布局，图块管理器将使用不正确的位置来保持“最大化”图块。

最大化图块索引应该引用项目列表中哪个图块配置是最大化图块，但是当交换图块时这似乎会更改。

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);
         });
     });

Answer 1

您正在更新磁贴配置，并在按钮单击时将其与现有配置合并。如果先破坏小部件，然后使用新配置对其进行初始化，则样本将起作用。我已更新your fiddle。

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

切换布局时，IgniteUI IgTileManager不会保持正确的最大化切片位置

1 个答案: