【问题标题】:gridster, how to auto fit to browser size change?gridster,如何自动适应浏览器大小的变化?
【发布时间】:2013-11-21 02:15:00
【问题描述】:

我正在尝试找到一种方法来自动调整 gridster 容器的大小。

当用户更改浏览器大小时,相应的 gridster 小部件会调整大小。 (其中列数和行数不变,但实际大小会)

我可以随着浏览器大小的变化计算“widget_base_dimensions”的值,

但是我找不到更新/执行小部件以适应新尺寸的方法。

我正在寻找是否有支持这种功能的功能,我注意到了

在 jquery.gridster.js 的第 3529 行,

/**
* Recalculates the offsets for the faux grid. You need to use it when
* the browser is resized.
*
* @method recalculate_faux_grid
* @return {Object} Returns the instance of the Gridster class.
*/
fn.recalculate_faux_grid = function() {
    var aw = this.$wrapper.width();
    this.baseX = ($(window).width() - aw) / 2;
    this.baseY = this.$wrapper.offset().top;

    $.each(this.faux_grid, $.proxy(function(i, coords) {
        this.faux_grid[i] = coords.update({
            left: this.baseX + (coords.data.col -1) * this.min_widget_width,
            top: this.baseY + (coords.data.row -1) * this.min_widget_height
        });

    }, this));

    return this;
};

我尝试了一些如何利用它们但失败了:(

如果有人成功使用此代码或解决问题,您能帮帮我吗?

【问题讨论】:

  • 你有什么运气吗?
  • 应在基本尺寸.gridster li{width:34%;} 上定义手动宽度,使其适合屏幕
  • 更好用 Packery.js,gridster 好像不再支持了
  • 你有什么运气吗?我最近遇到了容器宽度问题,并在 Gridster 源代码中发现了相同的功能,但没有使用它...我在 GitHub 上提出了一个问题,但还没有解决...github.com/ducksboard/gridster.js/issues/525

标签: javascript jquery gridster


【解决方案1】:

在 Github 的项目问题跟踪中长期存在 issue #5,标题为 Auto refresh - Responsive grid,其他几个因重复而关闭。在那里你会发现人们发布的代码,这些代码试图增加对 gridster 的响应能力。

【讨论】:

    猜你喜欢
    • 2012-10-04
    • 2021-10-10
    • 2015-04-26
    • 2013-07-26
    • 1970-01-01
    • 1970-01-01
    • 2012-10-05
    • 2021-12-23
    • 2021-12-17
    相关资源
    最近更新 更多