可以说我有一个正常运行的Gridster网格
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
</ul>
</div>
现在我想让一个网格可以包含三个部分:页眉、正文和页脚。
例如
<div class="gridster">
<ul>
<!-- header begin -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
<!-- header end -->
<!-- body begin -->
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
<!-- body end -->
<!-- footer begin -->
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
<!-- footer end -->
</ul>
</div>
我想要实现的是在一个 gridster 实例中拥有三个独立的网格部分。页眉和页脚都没有固定的行数。用户应该能够在页眉、正文和页脚之间拖动小部件,然后相应地增加页眉和页脚的高度。
我想避免为此使用多个 gridster 实例,因为网格的数据将被保存,并且正文甚至可以是 12 A4 页长,并且多个实例的执行时间和内存使用量要大得多。
有没有人对如何实现这一目标有任何可能的想法?
更新(29/04):
在布局方面,我发现最好的解决方案是:
<div class="gridster">
<ul class="gheader"></ul>
<ul class="gbody"></ul>
<ul class="gfooter"></ul>
</div>
有了这个,我可以在调用时拥有三个网格区域$(".gridster ul").gridster();
。
当我静态加载了一些小部件时,我可以很好地移动它们,ul
但是当我使用该功能动态添加一个小部件时,add_widget
该小部件只添加到第一个ul
(在这种情况下.gheader
)并且在它们之间拖动仍然需要被弄清楚。
我当前初始化 gridster 的代码:
Formbuilder.initGrid = function(selector){
$(selector).gridster({
widget_margins: [0, 0],
widget_base_dimensions: [this.baseWidth, this.baseHeight],
max_cols: 10,
min_rows: 10,
max_size_x: 10,
shift_larger_widgets_down: false,
resize: {
enabled: true,
max_size: [10, 10]
}
});
gridster = $(selector).gridster().data("gridster");
return gridster;
}