只调整一个gridster小部件可resize

是否有可能只使一个gridster小部件可resize？

我已经做到了，所以用户可以点击小部件标题，以便它扩展和收缩。

我想这样做，以便在扩展小部件时，它可以resize。

可以这样做吗？ 如果是这样，怎么样？

Answer 1

当resize时，每个小部件都使用setup_resize（）函数获取 span元素中的gs-resize-handle类。

所以你可以通过添加一个自定义类来使用css来隐藏resize句柄，例如：

.no-resize .gs-resize-handle-both{ display:none; } 

当您展开小部件时，您将删除自定义类。

编辑：

另一种方法可以是在gridster可扩展演示的演示中 ，对click事件进行一些更改。

Answer 2

您可以只有一些“特定”小部件可resize（仅4行）库，如下所示（请参阅gridster.js – v0.5.1 – 2014-03-26）。

1）更新add_widget函数（修改后的行在注释中标记为“custom”）：

 fn.add_widget = function(html, size_x, size_y, col, row, max_size, min_size, resizable) { //custom var pos; size_x || (size_x = 1); size_y || (size_y = 1); if (!col & !row) { pos = this.next_position(size_x, size_y); }else{ pos = { col: col, row: row }; this.empty_cells(col, row, size_x, size_y); } var $w = $(html).attr({ 'resizable' : (resizable === true), //custom 'data-col': pos.col, 'data-row': pos.row, 'data-sizex' : size_x, 'data-sizey' : size_y }).addClass('gs-w').appendTo(this.$el).hide(); 

[…]

2）更新register_widget函数（再次，注意评论中的“custom”一词）：

 fn.register_widget = function($el) { var resizable = $el.attr('resizable'); //custom var wgd = { 'col': parseInt($el.attr('data-col'), 10), 'row': parseInt($el.attr('data-row'), 10), 'size_x': parseInt($el.attr('data-sizex'), 10), 'size_y': parseInt($el.attr('data-sizey'), 10), 'max_size_x': parseInt($el.attr('data-max-sizex'), 10) || false, 'max_size_y': parseInt($el.attr('data-max-sizey'), 10) || false, 'min_size_x': parseInt($el.attr('data-min-sizex'), 10) || false, 'min_size_y': parseInt($el.attr('data-min-sizey'), 10) || false, 'el': $el }; if (this.options.avoid_overlapped_widgets && !this.can_move_to( {size_x: wgd.size_x, size_y: wgd.size_y}, wgd.col, wgd.row) ) { $.extend(wgd, this.next_position(wgd.size_x, wgd.size_y)); $el.attr({ 'data-col': wgd.col, 'data-row': wgd.row, 'data-sizex': wgd.size_x, 'data-sizey': wgd.size_y }); } // attach Coord object to player data-coord attribute $el.data('coords', $el.coords()); // Extend Coord object with grid position info $el.data('coords').grid = wgd; this.add_to_gridmap(wgd, $el); this.options.resize.enabled && (resizable === "true") && this.add_resize_handle($el); //custom return this; }; 

完成！

add_widget函数的新签名现在是：

 .add_widget( html, [size_x], [size_y], [col], [row], [resizable] ) 

如果您希望窗口小部件可以resize，只需将“resizable”参数设置为true即可！