gridster.js 中文文档

gridster.js 动态添加单元格

gridster.js 使用add_widget方法从数组 Array(而不是HTML)中创建添加单元格小部件的网格,未指定小部件位置(col, row)。

代码例子

 var gridster;
 $(function () {
        // 初始化对象
        gridster = $(".gridster > ul").gridster({
            widget_margins: [5, 5], //单元格间隔
            widget_base_dimensions: [100, 80] //单元格大小
        }).data('gridster');
        // 需要添加的单元格
        var widgets = [
            ['<li>0</li>', 1, 2],
            ['<li>1</li>', 3, 2],
            ['<li>2</li>', 3, 2],
            ['<li>3</li>', 2, 1],
        ];
       // 调用add_widget方法
        $.each(widgets, function (i, widget) {
            gridster.add_widget.apply(gridster, widget)
        });
});

在线试一试

Catalog
快速入门 Usage gridster.js 属性列表 gridster.js 方法列表 序列化创建网格 修改单元格大小 动态添加单元格 自定义拖拽句柄 展开选中单元格 拖动相关回调函数 缩放相关回调函数 响应式布局网格 交换模式 限制单元格大小 一个网页多个实例