javascript - gridster,如何自动适应浏览器大小的变化?

标签 javascript jquery gridster

我正在尝试找到一种自动调整 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;
};

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

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

最佳答案

长期存在issue #5在 Github 的项目问题跟踪上,标题为 Auto refresh - Responsive grid 和其他几个作为重复关闭。在那里您会找到人们发布的代码,他们试图为 gridster 添加响应能力。

关于javascript - gridster,如何自动适应浏览器大小的变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20111175/

相关文章:

javascript - Object.create(parent) 与 Object.create(parent.prototype)

asp.net-mvc-3 - 将 asp.net mvc 3 + Razor 与 Ajax 和 jquery 结合使用

javascript - Gridster,当小部件的宽度大于网格宽度时不会渲染

javascript - 在 Gridster.js 中更新图 block 位置的算法是什么

javascript - 带基础的动态警告框

events - 模型更改时的 emberjs 事件

javascript - 尝试在下拉列表中搜索具有标题名称的元素

javascript - 在转换框中输入后如何将多个链接逐一添加

javascript - Adobe Air - 检测 javascript 事件

jquery - WordPress 将 wp_nav_menu 自定义为 Bootstrap 可折叠树菜单