3

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

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

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

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

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 回答