如何使Gridster添加的小部件可调整大小
How to make Gridster added widgets resizable?
我的项目是基于这个提琴
但是我已经做了,所以你可以添加小部件使用:
$(document).on("click", "#add", function() {
var gridster = $(".layouts_grid ul").gridster().data('gridster');
gridster.add_widget('<li class="layout_block" data-row="1" data-col="1" data-sizex="1" data-sizey="1"><div class="remove_element">X</div></li>', 1, 1)
.resizable({
grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
animate: false,
minWidth: grid_size,
minHeight: grid_size,
containment: '#layouts_grid ul',
autoHide: true,
stop: function(event, ui) {
var resized = $(this);
setTimeout(function() {
resizeBlock(resized);
}, 300);
} });
现在工作了,它确实创建了一个新的小部件,但是小部件没有调整大小。尽管它是用所需的类和id创建的,但我认为这是因为它是一个动态添加的小部件。有什么办法能让它工作吗?
谢谢。
我会尝试这样做:
$(document).on("click", "#add", function() {
var gridster = $(".layouts_grid ul").gridster().data('gridster');
gridster.add_widget('<li class="layout_block" id="block" data-row="1" data-col="1" data-sizex="1" data-sizey="1"><div class="remove_element">X</div></li>', 1, 1);
$('#block').resizable({
grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
animate: false,
minWidth: grid_size,
minHeight: grid_size,
containment: '#layouts_grid ul',
autoHide: true,
stop: function(event, ui) {
var resized = $(this);
setTimeout(function() {
resizeBlock(resized);
}, 300);
} });
根据Gridster的文档,你可以使用resize属性:
gridster.add_widget('<li class="layout_block" data-row="1" data-col="1" data-sizex="1" data-sizey="1"><div class="remove_element">X</div></li>', 1, 1)
.resizable({
...
stop: function(event, ui) {
...
},
resize: {
enabled:true
}
...
});
添加新小部件时,只需为右下角的小箭头添加html代码…试试这样写
var widget = gridster.add_widget('<li />', width, heigth, newWidgetCol, newWidgetRow);
var resizableWidgetHtml = '<span class="gs-resize-handle gs-resize-handle-both"></span>';
widget.attr('id', ui.draggable.id);
widget.html(htmlContent+resizableWidgetHtml);
widget.resize.enabled = true;
相关文章:
- Graphiti中的形状有任何可调整大小的限制吗
- 用于显示onclick事件计数的可调整跨度标记
- jQuery UI在React.js中可调整大小
- 如何将可调整大小、可拖动的覆盖添加到网页中
- 可调整滚动条大小
- jQuery可选小部件和单列表行
- 添加JQuery UI在Meteor中添加对象后可调整大小
- 使可调整大小的手柄在具有指定尺寸的画布上可见
- 如何使用编辑器制作可调整大小的文本区域
- jQuery 可调整大小() 不起作用(带有示例)
- 使用 ng-hide 切换表中的列,其中 colRessize 可调整大小
- jQuery 可调整大小:如何在调整大小拖动期间获取重叠元素
- 具有无限水平滚动的流体可调整大小图像(修订版 2)
- 如何使用可调整大小的元素重叠其他元素
- 附加jQuery's可调整大小的处理程序
- HTML5画布中的可拖动和可调整大小元素
- imgAreaSelect JQuery插件可调整大小的Div's最小's宽度和高度
- JQuery可调整大小的触摸屏
- 如何使Gridster添加的小部件可调整大小
- 如何在可调整大小的表格中设置最小宽度