jQuery的可调整大小返回大小

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

编辑运用的方法来调整大小事件

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

，对于你的情况，我建议1 2的选项，无论是结合了启动和停止命令获取原始尺寸和修改尺寸，或绑定到调整大小以实时处理值。

用于启动实例/停止模式

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 2

例如格：

<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请求

Answer 3

事情可能在这些时间有所不同答案，但现在jQuery UI可以很容易地获得关于你的事件和UI元素的信息。我强烈建议控制台记录ui变量，因为它可以从中获得很多信息。不过要回答你的问题好一点：

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

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

的宽度，如果你想计算的这些值的增量，你可以参考ui.originalSize和高度或宽度属性有作为。

希望这多一点简洁的作品出来比其他的答案