我刚接触jQuery,正在尝试使用resizable。我能够成功地运行它,但似乎无法弄清如何返回新的大小。我想将新的大小设置为php变量以保存在数据库中。由于我对JavaScript和jQuery都很新,所以任何帮助都将是巨大的帮助。
我刚接触jQuery,正在尝试使用resizable。我能够成功地运行它,但似乎无法弄清如何返回新的大小。我想将新的大小设置为php变量以保存在数据库中。由于我对JavaScript和jQuery都很新,所以任何帮助都将是巨大的帮助。
//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()
编辑 应用于可调整大小事件的方法
可调整大小插件提供了几个可绑定的事件:create(创建)、start(开始)、resize(调整大小)和 stop(停止)。我们可以在初始化或随时之后将函数绑定到这些事件中的任何一个以便被调用。正如它的名称所示,当您开始调整元素大小时,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) {...});
现在,针对你的情况,我建议有两种选择:绑定开始和停止命令以获取原始和修改后的尺寸,或将调整大小绑定到实时值中。
开始/停止模式的示例:
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()]);
}
});
希望这可以帮助您。
在这些答案发布时可能会有所不同,但现在 jQuery UI 使得获取事件和 UI 元素的信息非常容易。我强烈建议记录 ui 变量的控制台日志,因为它提供了大量的信息。然而,为了更好地回答您的问题:
$('.selector').resizable({
stop: function (evt, ui) {
console.log(ui.size);
}
});
应该返回一个具有“height”和“width”属性的对象。这些是可调整大小项的新高度和宽度。
如果要计算这些值中任意一个的增量,可以参考ui.originalSize
以及那里的高度或宽度属性。
希望这比其他答案更简明扼要。
示例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回来。