2

我是 jquery 的新手，我正在尝试使用可调整大小。我可以让它正常工作，但似乎无法解决如何返回新尺寸。我想将新大小设置为要保存在数据库中的 php 变量。我是 javascript 和 jquery 的新手，所以任何帮助都会有很大帮助。

4

3 回答 3

5

可调整大小的插件本身不提供获取大小的方法。我假设他们没有实现这一点，因为它只是同一节点上的冗余方法，因为 jQuery 核心中已经有方法可以做到这一点。

jQuery 提供了几种方法来查找宽度和高度，具体取决于您想要做什么。普通的宽度/高度方法获取 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()

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

可调整大小的插件提供了几个要绑定的事件：创建、启动、调整大小和停止。我们可以绑定一个函数，以便在初始化时或之后的任何时间对这些事件中的任何一个进行调用。听起来，当您开始调整元素大小时触发 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) {...});

现在，对于您的情况，我建议 2 个选项中的 1 个，或者绑定 start 和 stop 命令以获取原始和修改后的大小，或者绑定到 resize 以实时使用该值。

启动/停止模式示例

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()]);
    }
});

希望这可以帮助

于 2011-12-12T00:47:04.993 回答
4

在给出这些答案时情况可能有所不同，但现在 jQuery UI 可以很容易地获取有关您的事件和 ui 元素的信息。我强烈建议使用控制台记录 ui 变量，因为它可以提供大量信息。但是，要更好地回答您的问题：

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

应该产生一个具有高度和宽度属性的对象。这些是可调整大小项目的新高度和宽度

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

希望这比其他答案更简洁

于 2013-11-18T07:00:25.750 回答
2

示例 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);

要将维度写回数据库，您将需要将值作为 a 的一部分form或通过 AJAX 请求返回

于 2011-12-12T00:43:53.587 回答