0

我正在尝试使用 gridster.js 和 jquery-cookie 来存储布局并让以下实现正常工作。它显示 json，我想让它默认/显示我的 html 内容。

我确定解决方案很简单/优雅，但我是 json 和 gridster 的新手。我相信我只需要编辑“if ($.cookie("grid-data") == null) { var json =...”

我知道我可以更改值和大小，但我想知道如何放入我的 html 内容。

希望有人能引导我朝着正确的方向前进。这就是我到目前为止所拥有的。

<section class="demo">
        <div id="main" class="gridster">
          <ul>

            <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">My Content</li>
            <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">Some text</li>
            <li data-row="3" data-col="2" data-sizex="2" data-sizey="1">Maybe an image and text</li>
            <li data-row="1" data-col="2" data-sizex="2" data-sizey="2">Maybe an image</li>

            <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">More Content</li>
            <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
            <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
            <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
            <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

            <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
            <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
          </ul>
        </div>
    </section>
<script>
var gridster;
$(function ()
 {
    $('<div id="main" class="gridster"></div>').appendTo('section');

    if ($.cookie("grid-data") == null) {
        var json = [{
            "id": "foo",
            "html": "<h3>My Content<\/h3>", //testing this failed
            "col": 1,
            "row": 1,
            "size_y": 2,
            "size_x": 3
        }, {
            "id": "bar",
            "col": 4,
            "row": 1,
            "size_y": 2,
            "size_x": 2
        },

        {
            "id": "tar",
            "col": 6,
            "row": 1,
            "size_y": 2,
            "size_x": 2
        },


        {
            "id": "boo",
            "col": 1,
            "row": 3,
            "size_y": 2,
            "size_x": 3
        }, {
            "id": "aar",
            "col": 4,
            "row": 3,
            "size_y": 2,
            "size_x": 2
        },

        {
            "id": "dar",
            "col": 6,
            "row": 3,
            "size_y": 2,
            "size_x": 2
        }

        ];
    }
    else
    {
        var json = JSON.parse($.cookie("grid-data"));
    }

   var grid = $("#main").gridster({
    draggable: {
        stop: function(event, ui){ 
            $.cookie("grid-data", JSON.stringify(grid.serialize()));
        }
    },
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140],
        max_size_y: 3,
        serialize_params: function ($w, wgd) {
            return {
                id: wgd.el[0].id,
                html: wgd.html,
                col: wgd.col,
                row: wgd.row,
                size_y: wgd.size_y,
                size_x: wgd.size_x
            }
        }
    }).data('gridster');

    for (i = 0; i < json.length; i++) {
        grid.add_widget(
            '<div id="' + json[i]['id'] + '"></div>',
        json[i]['size_x'],
        json[i]['size_y'],
        json[i]['html'],
        json[i]['col'],
        json[i]['row']);
    }
});
</script>
4

1 回答 1

0

您必须要求动态添加页面数据，所以必须使用它

var grid = $("#main").gridster();//grid will be holding the reference of gridster object
grid.add_widget('<li class="new"><h1>The HTML of the widget...</h1></li>', 2, 1);
//grid.add_widget( html, [size_x], [size_y], [col], [row] )

就像如果你和你一起使用 json 数组然后你用 add_widget 这样迭代

for(var index=0;index<json.length;index++) {
    grid.add_widget('<li class="new" id="'+json[index].id+'">'+json[index].html+'</li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
}
于 2013-10-23T13:29:37.450 回答