jQuery UI Resizable在resize事件中停止调整大小

Question

使用jQuery UI Resizable我试图阻止基于各种规则的大小调整.对于绝对定位的元素,内置的包含功能似乎不能正常工作,我还需要比这更灵活的东西.

有这样的事情:

$( ".selector" ).resizable({ resize : function(event, ui) { /* ??? */ } });

如何告诉"ui"对象防止调整大小？

谢谢.

Answer 1

这很简单,请看一下这个代码,用于可调整大小的浮动'左'div列,其宽度固定和相互限制.

var maxWidthOffset, total2Width;
        $('#'+this.id).find('ul:not(:last)').resizable({
            handles: 'e',
            ghost: true,
            delay: 200,
            helper: "overmoused",
            minWidth: 20,
            start: function(e, ui) {
                maxWidthOffset = ui.element.next().width()-20;
                total2Width = ui.element.width()+maxWidthOffset+20;
            },
            resize: function(e, ui) {
                if (ui.size.width > (ui.originalSize.width + maxWidthOffset)) {
                    $(this).resizable('widget').trigger('mouseup');
                }
            },
            stop: function(e, ui) {
                var w;
                if (ui.originalSize.width > ui.size.width) {
                    w = ui.element.next().width()+ui.originalSize.width - ui.size.width;
                    ui.element.next().width(w>20 ? w : 20);
                } else {
                    w = ui.element.next().width()-(ui.size.width - ui.originalSize.width);
                    ui.element.next().width(w>20 ? w : 20);
                }
                ui.element.width(total2Width-ui.element.next().width());
            }
        });

Answer 2

没有标准选项可以在此版本停止调整大小.您可以禁用可调整大小但它将继续调整大小,并将在下次尝试时停止调整大小的选项.

$(".selector").resizable("disable");

无论如何,我发现您可以直接从Resize Event使用maxWidth和maxHeight属性来限制调整大小.

$(".selector").resizable({
    aspectRatio: true,
    handles: 'all',
    resize: function( event, ui ){
        if(x > y){
            (".selector").resizable("option","maxWidth",ui.size.width);
            return;
        }
    }
});

Answer 3

只需在resize事件中直接设置UI属性即可.(如果您愿意,也可以在停止事件中执行此操作):

$(".selector").resizable({
    resize: function(event, ui) {
        // set directly
        ui.size.height = 150;
        ui.size.width = 150;
    }
});

$(".selector2").resizable({
    resize: function(event, ui) {
        // return value from another function
        restrictSize(ui);
    }
});

function restrictSize(ui) {
    maxheight = 250;
    maxwidth = 300;

    ui.size.height = ui.size.height > maxheight ? maxheight : ui.size.height;
    ui.size.width = ui.size.width > maxwidth ? maxwidth : ui.size.width;
}

当然,你也可以做同样的定位.

看到这个小提琴:http://jsfiddle.net/dtwist/PrEfd/

Answer 4

当前版本似乎不可能。