#javascript #gridstack
#javascript #gridstack
Вопрос:
Я создаю веб-страницу, которая включает в себя сетку Gridstack. Я инициализирую его следующим образом:
<script type="text/javascript">
var grid = GridStack.init({
acceptWidgets: false, // Accept widgets from other grids or from outside.
alwaysShowResizeHandle: true, // Should resize handle be visible at all times or only at hover.
animate: false, // ???
auto: true, // Should Gridstack automaticaly initialize it's items?
cellHeight: "155px", // One cell height.
column: 48, // Number of columns to which to snap to.
disableDrag: false, // Eanble or disable dragging.
disableOneColumnMode: true, // Disable "one-column" mode when width equals minimal width.
disableResize: false, // Enable or disable resizing.
draggable: true, // ???
dragOut: true, // Prevent dragging items outside of their parent element.
float: true, // Enable floating tiles.
handle: '.grid-stack-item-content', // Select draggable handle class.
handleClass: 'grid-stack-item-content', // Select draggable handle class (override).
itemClass: 'grid-stack-item', // Choose class, which will be treated as a tile.
maxRow: 12, // Maximum rows where zero means unlimited.
minRow: 1, // Minimum rows to prevent empty grid from colapsing.
minWidth: 768, // Constant width which determines, when "one-column" mode is triggered.
oneColumnDomSort: false, // ???
placeholderClass: 'grid-stack-placeholder', // Select placeholder class.
placeholderText: '', // Text inside a placeholder.
resizable: { // Should resize handle be visible at all times or only at hover (override).
autoHide: false,
handles: 'n, nw, w, sw, s, se, e, ne'
},
removeable: false, // Enables removing of tiles if they are dragged outside of the grid.
removeTimeout: 2000, // Time in "ms" before tiles dragged out of the grid are removed.
row: 48, // Fixed number of rows where zero means unlimited.
rtl: false, // Right to left mode.
staticGrid: false, // Prevent any kind of resizing or drag amp; drop functionalities.
verticalMargin: 20, // Vertical gap between tiles.
});
</script>
И затем я динамически создаю виджет, то есть плитку, используя:
<!-- Gridstack: Example of adding a tile i.e. widget -->
<script>
grid.addWidget(`
<div>
<div class="grid-stack-item-content">
<p>...</p>
</div>
</div>`,
0,0,1,1,true,1,48,1,48,"ID");
</script>
Это создает виджет в Chromium, Firefox, Edge. Но не в IE11. Кто-нибудь знает, что я мог делать неправильно? Похоже, я делаю все по руководству…
Это консольный журнал в IE11:
И если я нажму на ошибку, я получу эту строку, где, кажется, нет странных символов:
Комментарии:
1. Ошибки в вашей консоли?
2. @AluanHaddad Спасибо, что указали на это. Я отредактировал свой вопрос и добавил вывод на консоль.
3. @AluanHaddad Возможно ли, что обратная метка, которую я использую для указания элемента в
grid.addWidget()
, не поддерживается в IE11???4. На самом деле это не так.
5. Это было решением моей проблемы. Но чтобы найти его, я сначала использовал HTML-валидатор, который удалил ненужные предупреждения, а затем консоль показала мне совершенно другую строку, в которой была ошибка. И он был правильным (там, где была обратная ссылка)!