切换布局时,IgniteUI IgTileManager 不会保持正确的最大化图块位置
IgniteUI IgTileManager does not maintain the correct maximized tile location when switching layouts
我正在尝试根据 window 大小和方向设置不同的布局。一个图块比其他图块大,被认为是 "maximized" 个图块。其余为"minimized"。当我单击 "minimized" 磁贴时,它会与 "maximized" 位置交换。
作品:
如果我不交换任何图块,只是改变布局,那么一切都是正确的,最大的图块位置被认为是 "maximized" 个图块。
无效:
如果我先单击 "minimized" tile 将其与 "maximized" tile 交换,然后更改布局,tilemanager 将使用不正确的位置来放置 "maximized" tile。
最大化图块索引应参考项目列表中的哪个图块配置是最大化图块,但当图块被交换时,这似乎会发生变化。
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);
});
});
您正在更新磁贴配置并在单击按钮时将其与现有配置合并。如果您先销毁小部件,然后使用新配置对其进行初始化,您的示例将起作用。我更新了 your fiddle.
$(function () {
$('#layoutContainer').igTileManager(optionsWide);
$('#wideBtn').click(function () {
$('#layoutContainer').igTileManager("destroy");
$('#layoutContainer').igTileManager(optionsWide);
});
$('#narrowBtn').click(function () {
$('#layoutContainer').igTileManager("destroy");
$('#layoutContainer').igTileManager(optionsNarrow);
});
});
我正在尝试根据 window 大小和方向设置不同的布局。一个图块比其他图块大,被认为是 "maximized" 个图块。其余为"minimized"。当我单击 "minimized" 磁贴时,它会与 "maximized" 位置交换。
作品: 如果我不交换任何图块,只是改变布局,那么一切都是正确的,最大的图块位置被认为是 "maximized" 个图块。
无效: 如果我先单击 "minimized" tile 将其与 "maximized" tile 交换,然后更改布局,tilemanager 将使用不正确的位置来放置 "maximized" tile。
最大化图块索引应参考项目列表中的哪个图块配置是最大化图块,但当图块被交换时,这似乎会发生变化。
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);
});
});
您正在更新磁贴配置并在单击按钮时将其与现有配置合并。如果您先销毁小部件,然后使用新配置对其进行初始化,您的示例将起作用。我更新了 your fiddle.
$(function () {
$('#layoutContainer').igTileManager(optionsWide);
$('#wideBtn').click(function () {
$('#layoutContainer').igTileManager("destroy");
$('#layoutContainer').igTileManager(optionsWide);
});
$('#narrowBtn').click(function () {
$('#layoutContainer').igTileManager("destroy");
$('#layoutContainer').igTileManager(optionsNarrow);
});
});