Параметры инициализации

Gridstack.js предоставляет мощный и гибкий API для создания интерактивных сеточных интерфейсов. Основной объект инициализации создается через конструктор GridStack.init(options, el), где options — это объект с настройками, а el — DOM-элемент, к которому привязывается сетка. Каждый параметр управления влияет на поведение сетки и взаимодействие с элементами.

Параметры сетки

  1. cellHeight Определяет высоту одной ячейки в пикселях. Можно указать число или строку с единицами ('100px').

    const grid = GridStack.init({ cellHeight: 80 });

    Этот параметр напрямую влияет на визуальное соотношение высоты и ширины элементов сетки, особенно при использовании автоматического изменения размеров.

  2. column Количество колонок сетки. По умолчанию 12, но может быть любым положительным числом.

    const grid = GridStack.init({ column: 6 });

    Изменение числа колонок автоматически перераспределяет элементы, если их позиция превышает новые границы.

  3. float Булев параметр, включающий или отключающий “плавающее” поведение виджетов. Если true, элементы могут свободно перемещаться вверх, заполняя пустые ячейки.

    const grid = GridStack.init({ float: true });

  4. staticGrid Делает сетку статичной, запрещая перетаскивание и изменение размеров элементов. Полезно для отображения заранее скомпонованных панелей.

    const grid = GridStack.init({ staticGrid: true });

Параметры взаимодействия

  1. draggable Настройки для перетаскивания элементов, поддерживает объект с конфигурацией, совместимой с jQuery UI или встроенной реализацией.

    const grid = GridStack.init({ draggable: { handle: '.grid-stack-item-content' } });

    Ключевой момент: можно указать селектор handle, чтобы перемещать элементы только за определенную область.

  2. resizable Настройки для изменения размеров элементов. Аналогично draggable, поддерживает объект конфигурации.

    const grid = GridStack.init({ resizable: { handles: 'se, sw' } });

    Позволяет ограничивать направления изменения размеров, например, только по диагонали.

  3. disableOneColumnMode Булев параметр, отключающий автоматический переход сетки в одноколоночный режим при уменьшении ширины окна.

    const grid = GridStack.init({ disableOneColumnMode: false });

Параметры адаптивности

  1. minRow / maxRow Ограничивают количество строк сетки. Если количество элементов превышает maxRow, новые виджеты не будут добавлены.

    const grid = GridStack.init({ minRow: 2, maxRow: 10 });

  2. disableResize Можно полностью отключить изменение размеров для всех элементов.

    const grid = GridStack.init({ disableResize: true });

  3. rtl Включает режим “справа налево”, полезно для интерфейсов на языках с направлением письма RTL.

    const grid = GridStack.init({ rtl: true });

Продвинутые параметры

  1. margin Определяет отступ между элементами сетки. Может быть числом в пикселях или строкой с CSS-единицами.

    const grid = GridStack.init({ margin: 10 });

  2. animate Включает анимацию при перетаскивании и изменении размеров элементов. Может быть булевым значением или объектом с настройками.

    const grid = GridStack.init({ animate: true });

  3. alwaysShowResizeHandle Позволяет всегда отображать ручки изменения размеров, независимо от положения курсора.

    const grid = GridStack.init({ alwaysShowResizeHandle: true });

  4. disableDrag Полностью отключает возможность перетаскивания элементов, независимо от настройки draggable.

    const grid = GridStack.init({ disableDrag: true });

  5. cellHeightUnit Позволяет указать единицы измерения для cellHeight ('px' или 'vh'). Важен для адаптивного дизайна.

    const grid = GridStack.init({ cellHeightUnit: 'vh' });

Примеры комбинированной инициализации

const grid = GridStack.init({
  column: 12,
  cellHeight: 80,
  float: false,
  staticGrid: false,
  draggable: { handle: '.grid-stack-item-content' },
  resizable: { handles: 'se, sw' },
  animate: true,
  margin: 10
}, '#myGrid');

В этом примере создается сетка из 12 колонок, с фиксированной высотой ячейки 80px, активным перетаскиванием и изменением размеров элементов только за их контент, с включенной анимацией и отступами между элементами.

Скрытые особенности

  • Некоторые параметры инициализации, такие как float, disableOneColumnMode или rtl, оказывают влияние не только на визуальное отображение, но и на внутренний алгоритм компоновки сетки.
  • Параметры draggable и resizable могут быть объектами с кастомными событиями (start, stop, drag, resize) для расширенной логики управления виджетами.
  • Значения по умолчанию для большинства параметров подбираются так, чтобы сетка сразу была функциональной без дополнительных настроек, но явная инициализация позволяет полностью контролировать поведение каждого виджета.

Эти параметры являются фундаментальными для настройки Gridstack.js и позволяют создавать как простые дашборды, так и сложные адаптивные интерфейсы с динамическим управлением компонентами.

Оглавление