仅使一个 gridster 小部件可调整大小答案

【问题标题】：Make only one gridster widget resizable仅使一个 gridster 小部件可调整大小
【发布时间】：2014-02-28 22:27:32
【问题描述】：

是否可以只调整一个 gridster 小部件的大小？

我已经做到了，因此用户可以单击小部件标题，以便它展开和收缩。

我想让它在小部件展开时可以调整大小。

这可以吗？如果有，怎么做？

【问题讨论】：

标签： jquery widget resizable gridster

【解决方案1】：

您只能让一些“特定”小部件调整大小（仅 4 行）库，如下所示（请参阅 gridster.js - v0.5.1 - 2014-03-26）..

1) 更新add_widget函数（修改的行在cmets中标记为“自定义”）：

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 函数（同样，请注意 cmets 中的“自定义”一词）：

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

如果您希望小部件可调整大小，只需将“可调整大小”参数设置为 true！

【讨论】：

【解决方案2】：

启用调整大小时，每个小部件通过 setup_resize() 函数在 span 元素中获取 gs-resize-handle 类。

所以你可以通过添加一个自定义类来使用 css 来隐藏调整大小的句柄：

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

当您扩展您的小部件时，您会删除您的自定义类。

编辑：

另一种方法是在gridster expandable demo 上的演示中对点击事件进行一些更改。

【讨论】：