javascript - jquery ui resizable返回大小

Question

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

Answer 1

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

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

可调整大小的插件提供了几个绑定(bind)事件:创建、开始、调整大小和停止。我们可以绑定(bind)一个函数以在初始化时或之后的任何时间调用这些事件中的任何一个。听起来，开始事件会在您开始调整元素大小时触发，停止会在您停止调整元素大小时触发，并且每当元素大小在调整大小时(每个像素)发生变化时都会调用 resize。

初始化时绑定(bind):

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

或稍后在任何时候绑定(bind)

$('.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 个，绑定(bind)开始和停止命令以获取原始大小和修改后的大小，或者绑定(bind)以调整大小以实时处理值。

开始/停止模式示例

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

希望对你有帮助