jQuery ui可调整大小，返回大小 [英] jquery ui resizable returning the size

问题描述

对jQuery来说是即时消息，我正在尝试使用可调整大小.我可以使其正常工作，但似乎无法解决如何返回新尺寸的问题.我想将新大小设置为要保存在数据库中的php变量.我是javascript和jquery的新手，所以任何帮助都将是一个很大的帮助.

Hay im new to jquery and i'm trying to use resizable. I can get it to work fine but cant seem to work out how to return the new size. I would like to set the new size's to a php variables to be save in a DB. I am new to javascript and jquery so any help would be a big help.

推荐答案

可调整大小的插件本身不提供获取大小的方法.我认为他们没有实现此目标，因为这只是同一节点上的冗余方法，因为jQuery核心中已经有实现此目标的方法.

The resizable plugin itself does not provide a method to get the sizes. I assume they did not implement this because it would just be redundancy methods on the same node, as there are already methods in jQuery core for doing this.

jQuery提供了几种根据您想要执行的操作来找到宽度和高度的方法.普通的width/height方法获取css值.很多时候，使用outerWidth和outerHeight方法可能更有用，因为它们返回页面上元素的总计算大小，包括所有边距，边框等.

jQuery provides several ways to find width and height depending on what you want to do. The plain width/height methods get the css values. A lot of times it can be more useful to use the outerWidth and outerHeight methods, however, because they return the total calculated size of the element on the page, including all margins, borders, etc.

示例:

//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()

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

Edit Applying the methods to resizable events

可调整大小的插件提供了几个绑定到的事件:创建，启动，调整大小和停止.我们可以绑定一个函数以在初始化时或以后的任何时间调用这些事件.听起来，开始事件会在您开始调整元素大小时触发，在您停止调整元素大小时停止触发，并且在调整大小期间每次元素大小更改时都会调用resize(每个像素).

The resizable plugin offers several events to bind to: create,start,resize, and stop. We can bind a function to get called on any of these events at initialization or any time later. As it sounds, the start event fires when you start to resize the element, stop fires when you stop resizing the element, and resize gets called everytime the size of the element changes during resizing (every pixel).

初始化时绑定

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

Now, for your case, I would suggest 1 of 2 options, either binding the start and stop commands to get your original and modified sizes, or binding to resize to work with the value in real time.

开始/停止模式示例

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

在控制台上打印值的示例

Example for printing value on the move to console

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

希望这会有所帮助

这篇关于jQuery ui可调整大小，返回大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！