jquery ui可调整浮动元素。

时间:2012-03-24 20:40:34

标签: javascript jquery jquery-ui jquery-ui-resizable

当你向右浮动元素时,然后使用jQuery UI的可调整大小的小部件使其从左边缘调整大小,奇怪的事情开始发生。

我把它放在一起:

http://jsfiddle.net/nicholasstephan/kCduV/2/

如果您调整“侧边栏”的大小,您会立即看到我在说什么。

我在这里做错了什么?

我更喜欢保持浮动:正确,因此左栏自行处理。

1 个答案:

答案 0 :(得分:4)

工作演示: http://jsfiddle.net/kCduV/10/和另一种解决方案:http://jsfiddle.net/kCduV/12/

jQuery代码:

$(function() {
    // $('.resizable').resizable({'handles': 'w'});
    $('.resizable').resizable({
        handles: 'e,w',
        resize: function (event,ui) {
            ui.position.left = ui.originalPosition.left;
            ui.size.width = (ui.size.width
                - ui.originalSize.width )*2
                + ui.originalSize.width;
        }
     });
});

$(function() {
    // $('.resizable').resizable({'handles': 'w'});
    $('.resizable').resizable({
        handles:'e,w',
        resize: function (event,ui) {
            ui.position.left = ui.originalPosition.left;
            ui.size.width += (ui.size.width - ui.originalSize.width);
        }
    });
});

说明: jQuery Resizable: doubling the resize width