jQuery UI可调整大小返回尺寸。

Question

我刚接触jQuery，正在尝试使用resizable。我能够成功地运行它，但似乎无法弄清如何返回新的大小。我想将新的大小设置为php变量以保存在数据库中。由于我对JavaScript和jQuery都很新，所以任何帮助都将是巨大的帮助。

- 1ftw1

Answer 1

可调整大小的插件本身没有提供获取尺寸的方法。 我认为他们没有实现这一点是因为它只会在同一节点上重复使用方法，因为jQuery核心已经有用于此的方法。 根据您想要做什么，jQuery提供了几种查找宽度和高度的方法。 简单的width / height方法获取css值。 但是，使用outerWidth和outerHeight方法可能更有用，因为它们返回包括所有边距，边框等在内的页面元素的总计算大小。 示例：

//Width/Height of just the element (as from css)
var w = $('.selector').width()
var h = $('.selector').height()

//Width/Height of total space the element takes up with formatting (includes border and margin)
var w = $('.selector').outerWidth()
var h = $('.selector').outerHeight()

//Width/Height of the space the content of the element takes up
var w = $('.selector').innerWidth()
var h = $('.selector').innerHeight()

编辑 应用于可调整大小事件的方法

可调整大小插件提供了几个可绑定的事件：create（创建）、start（开始）、resize（调整大小）和 stop（停止）。我们可以在初始化或随时之后将函数绑定到这些事件中的任何一个以便被调用。正如它的名称所示，当您开始调整元素大小时，start事件触发；当您停止调整元素大小时，stop事件触发；每次在调整大小过程中更改元素大小（每个像素）时，都会调用resize事件。

在初始化时进行绑定：

$('.selector').resizable({
    //Other options
    create : function(event,ui) {...},
    start : function(event,ui) {...},
    stop : function(event,ui) {...},
    resize : function(event,ui) {...}
});

在任何后续时间绑定，或在任何后续时间绑定。

$('.selector').bind('resizecreate',function(event,ui) {...});
$('.selector').bind('resizestart',function(event,ui) {...});
$('.selector').bind('resizestop',function(event,ui) {...});
$('.selector').bind('resize',function(event,ui) {...});

现在，针对你的情况，我建议有两种选择：绑定开始和停止命令以获取原始和修改后的尺寸，或将调整大小绑定到实时值中。 开始/停止模式的示例：

var startW = 0;
var startH = 0;

$('.selector').resizable({
    //Other options
    start : function(event,ui) {
        startW = $(this).outerWidth();
        startH = $(this).outerHeight();
    },
    stop : function(event,ui) {
        endW = $(this).outerWidth();
        endH = $(this).outerHeight();
        alert("width changed:"+ (endW-startW) + " -- Height changed:" + (endH-endW));
    }
});

在控制台上输出值的示例

$('.selector').resizable({
    //other options
    resize: function(event,ui) {
        console.log([$(this).outerWidth(),$(this).outerHeight()]);
    }
});

希望这可以帮助您。

- jyore

---

这个工作可以给我起始宽度和高度，但如果我想要新的，有没有好的方法可以即时输出呢？ - 1ftw1

只需即时调用...特别是使用可调整大小插件，您可以使用事件在需要时获取它...请参见编辑中的示例。 - jyore

Answer 2

在这些答案发布时可能会有所不同，但现在 jQuery UI 使得获取事件和 UI 元素的信息非常容易。我强烈建议记录 ui 变量的控制台日志，因为它提供了大量的信息。然而，为了更好地回答您的问题：

$('.selector').resizable({
    stop: function (evt, ui) {
        console.log(ui.size);
    }
});

应该返回一个具有“height”和“width”属性的对象。这些是可调整大小项的新高度和宽度。

如果要计算这些值中任意一个的增量，可以参考ui.originalSize以及那里的高度或宽度属性。

希望这比其他答案更简明扼要。

- adambullmer

Answer 3

示例div：

<div id="div">
    <p>this is the div i want to retrieve demensions</p>

    <p>second paragraph</p>
</div>

使用此JavaScript检索尺寸。

var width = $("#div").css("width"),
    height =$("#div").css("height");

alert (width + ", " + height);

要将尺寸写回数据库，您需要将值作为form的一部分或通过AJAX请求POST回来。

- Lloyd