Расположение Popup и Window

По умолчанию компоненты window и popup (если они не занимают весь экран) располагаются в верхнем левом углу экрана вплотную к границам браузера.

Вы можете изменять расположение окон на экране.

Абсолютное позиционирование

Отступ слева (left) и сверху (top) можно задать в конструкторе компонента:

webix.ui({
    view:"window",
    width:300,
    height:200,
    top:100,
    left:100
}).show();

Расположение можно задать динамически во время вызова show():

webix.ui({
    view:"window",
    ...
}).show({
    x:300, // смещение в правую сторону
    y:50 // смещение вниз
});

Related sample: Window Offset

Еще один способ - использование метода setPosition():

$$('my_window').setPosition(100, 100); // левый и верхний отступы

Относительное позиционирование

Относительное позиционирование задается свойством position:

center - поместить окно или попап в центр экрана;
top - поместить окно или попап в верхней части экрана с горизонтальным выравниванием по центру. Окно появится с анимацией (slide).

webix.ui({
    view:"window",
    position:"center" // или "top"
    // ..конфигурация window
});

Related sample: Window: Centralization

Позиционирование относительно HTML элементов

Метод show() позволяет указывать HTML элемент, возле которого окно должно появиться.

$$("window").show(node);

По умолчанию окно будет размещено под элементом. Чтобы переопределить это поведение, передайте методу объект с нужной позицией.

$$("window").show(node, {pos:"top"});

Доступные значения: top, bottom (значение по умолчанию), left и right.

Чтобы сместить окно относительно элемента, передайте вместе со значением pos координаты окна по вертикали и горизонтали:

$$("window").show(node, {pos:"top", x:10, y:10});

Расположение с помощью свойства position

По умолчанию расположение задается одним из двух способов, в зависимости от величины окна:

если размеры окна не заданы, оно или подстроится под содержимое в body, или под размеры по умолчанию (minHeight: 200, minWidth: 300);
если окно открыто в режиме fullscreen, оно займет весь экран с отступами (top, left) равными 0;
если для окна или попапа заданы строгие размеры (свойства width и height), его отступы top и left тоже будут 0;

Расположение и размеры окна можно задавать динамически (т.е. они будут изменяться во время исполнения). Сделать это можно, если задать свойство position функцией. В качестве параметра функция будет получать объект state. Функция будет вызываться при каждой перерисовке окна (вызываемой в т.ч. изменениями размера окна браузера).

webix.ui({
    view:"window",
    head:"",
    body:{...},
    position:function(state){
        state.left = 20; // фиксированные значения
        state.top = 20;
        state.width -=60; // относительные значения
        state.height +=60;
    }
});

Наверх