Question

我是jquery的新手，我正在尝试使用可调整大小。我可以让它工作正常，但似乎无法弄清楚如何返回新的大小。我想将新大小设置为php变量以保存在DB中。我是javascript和jquery的新手，所以任何帮助都将是一个很大的帮助。

Answer 1

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

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

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

如果您想计算其中任何一个值的增量，您可以在那里引用ui.originalSize以及高度或宽度属性。

希望这比其他答案更简洁

Answer 2

可调整大小的插件本身不提供获取大小的方法。我假设他们没有实现这个，因为它只是同一节点上的冗余方法，因为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()

修改将方法应用于可调整大小的事件

resizable插件提供了几个要绑定的事件：create，start，resize和stop。我们可以绑定一个函数，以便在初始化或以后的任何时候调用这些事件。听起来，当您开始调整元素大小时会触发start事件，当您停止调整元素大小时会停止触发，并且每次调整大小（每个像素）时元素的大小都会更改调整大小。

初始化时绑定：

$('.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个选项中的一个，或者绑定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()]);
    }
});

希望这有帮助

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回来

jquery ui resizable返回大小

3 个答案: