Изменение размеров методов

Существует два способа изменить размеры Вашего виджета: относительно и абсолютно.

Для изменения размеров виджета относительно его текущего размера используйте метод window.resizeBy(width, height). Этот метод берет текущий размер Вашего виджета и добавляет значения, найденные в параметрах ширины и высоты. Обратите внимание на то, что эти значения могут быть отрицательными, позволив Вам уменьшить размер Вашего виджета.

Другой способ изменить размеры Вашего виджета состоит в том, чтобы указать абсолютный размер, которым должен быть виджет. Чтобы сделать это, используйте метод window.resizeTo(width, height).

Живое изменение размеров

Живое изменение размеров означает, что Ваш виджет может изменить свой размер и содержание на основе предпочтения пользователя. Попытайтесь ограничить живое изменение размеров использования случаями, где это абсолютно необходимо. Если Ваше содержание может быть показано в фиксированном, простом пользовательском интерфейсе, сделайте так.

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

    <img id='resize' src='/System/Library/WidgetResources/resize.png' onmousedown='mouseDown(event);'/>

Кроме того, изменять размеры управление помещается в нижний правый угол виджета с помощью CSS в таблице стилей:

#resize {

    position:absolute;

    top: 208px;

    right: 2px;

    -apple-dashboard-region: dashboard-region(control rectangle);

}

В Вашем файле JavaScript включайте этот код:

var growboxInset;

function mouseDown(event)

{

    document.addEventListener("mousemove", mouseMove, true);

    document.addEventListener("mouseup", mouseUp, true);

    growboxInset = {x:(window.innerWidth - event.x), y:(window.innerHeight - event.y)};

    event.stopPropagation();

    event.preventDefault();

}

function mouseMove(event)

{

    var x = event.x + growboxInset.x;

    var y = event.y + growboxInset.y;

    document.getElementById("resize").style.top = (y-12);

    window.resizeTo(x,y);

    event.stopPropagation();

    event.preventDefault();

}

function mouseUp(event)

{

    document.removeEventListener("mousemove", mouseMove, true);

    document.removeEventListener("mouseup", mouseUp, true);

    event.stopPropagation();

    event.preventDefault();

}

Три функции в этом коде обрабатывают различные события от нажатия мыши, происходящие во время перетаскивания. Во-первых, mouseDown когда по изменять размеры управлению щелкают, вызывается. Это записывает исходное размещение щелчка в lastPos и регистры два обработчика для, когда мышь перемещается и концы щелчка мышью.

Затем, mouseMove вызывается каждый раз, когда мышь перемещена любое расстояние. Код, столь же перечисленный здесь, не имеет никаких ограничений, означая, что виджет может быть столь большим или маленьким, как пользователь хочет. Если у Вас есть ограничения размера на Ваш виджет, добавьте их здесь.

Наконец, mouseUp когда щелчок мышью заканчивается, вызывается. Это удаляет себя и mouseMove функционируйте как обработчики. Если Вы не делаете этого, эти функции все еще вызваны каждый раз, когда мышь перемещается, или щелчок заканчивается.

Корректировка рамки для закрытия

В зависимости от того, как Ваш виджет изменяет размеры и в которых направлениях, Вы, возможно, должны скорректировать размещение рамки для закрытия своего виджета. setCloseBoxOffset метод предоставляет Вам возможность сделать это:

widget.setCloseBoxOffset(x,y);

x и y координаты, которые Вы обеспечиваете, в связи с верхним левым углом виджета, где значения 0,0 размещает центр рамки для закрытия по фактическому верхнему левому углу окна виджета. x и y значения не могут быть больше, чем 100.