使用Gridster,我们使用resize.enabled
config 选项创建了一个带有可调整大小的小部件的网格。
在用户完成调整 Gridster 小部件的大小后,我们希望获得小部件的新最终大小。我们应该怎么做?
使用Gridster,我们使用resize.enabled
config 选项创建了一个带有可调整大小的小部件的网格。
在用户完成调整 Gridster 小部件的大小后,我们希望获得小部件的新最终大小。我们应该怎么做?
我最近也一直在使用 gridster 调整大小。这是我如何抓住尺寸
$(function () { //DOM Ready
$scope.gridster = $(".gridster ul").gridster({
...
resize: {
enabled: true,
start: function (e, ui, $widget) {
...
},
stop: function (e, ui, $widget) {
var newHeight = this.resize_coords.data.height;
var newWidth = this.resize_coords.data.width;
...
}
},
...
}).data('gridster');
});
'newHeight' 和 'newWidth' 可以在 resize-stop 事件中读取。您还可以探索“this”实例以获取单位而不是像素的大小。
如果您想要 Gridster 块中的新大小,而不是像素,您有几个选择。
首先,您的 Gridster 实例在 resize 事件之后添加了两个包含此信息的属性:
.resize_last_sizex
- 最近调整大小的小部件的新宽度,以网格块为单位.resize_last_sizey
- 最近调整大小的小部件的新高度,以网格块为单位然而,这些的存在目前没有记录,我不清楚客户端代码是否应该使用它们。
也许更简洁的方法是使用该.serialize()
方法,将刚刚调整大小的小部件传递给它。您可以从传递给.resize.stop
处理程序的参数中获取小部件。您可以使用.size_x
和.size_y
返回的对象的属性.serialize()
来获取网格块中新调整大小的小部件的大小。
例子:
var gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
helper: 'clone',
resize: {
enabled: true,
stop: function (e, ui, $widget) {
var newDimensions = this.serialize($widget)[0];
alert("New width: " + newDimensions.size_x);
alert("New height: " + newDimensions.size_y);
// Alternative approach; these properties are undocumented:
// alert("New width: " + this.resize_last_sizex);
// alert("New height: " + this.resize_last_sizey);
}
}
}).data('gridster');
这是一个演示上述代码的 jsfiddle。