gridster.js 属性列表
本文将列举 gridster.js 的属性列表及其使用方法。
属性列表
| 属性名称 | 说明 |
|---|---|
| resize.enabled | 是否允许单元格放大缩小单元格 resize: { enabled: true } |
| resize.axes | 允许缩放宽还是高resize:{axes:['both']} 、resize:{axes:['x']}、resize:{axes:['y']} |
| resize.handle_class | 缩放按钮的样式 |
| resize.handle_append_to | 将缩放按钮（句柄）追加到那个元素，css筛选器 |
| resize.max_size | resize.max_size:[10,10]单元格最大允许放大多少行和列 |
| resize.start | 开始缩放的事件function(e, ui, $widget) {} |
| resize.resize | 缩放大小时的事件function(e, ui, $widget) {} |
| resize.stop | 停止缩放的事件function(e, ui, $widget) {} |
| widget_selector | 单元格的选择器默认li，可以是css选择器或jquery选择器 |
| widget_margins | 单元格之间的间隔默认[10, 10]，单位像素 |
| widget_base_dimensions | 单元格最小的大小默认[140, 140]，单位像素 |
| extra_rows | Add more rows to the grid in addition to those that have been calculated. |
| extra_cols | Add more rows to the grid in addition to those that have been calculated. |
| max_cols | 网格容器（也可以理解成画布）的最大列数 |
| min_cols | 网格容器最小列数，最小为1 |
| min_rows | 网格容器最小行数 |
| max_rows | 网格容器最大的行数 |
| max_size_x | 单元格跨是否可以跨越最大列数,默认false |
| autogenerate_stylesheet | 默认是true，在控制台查看你会发现在head前插入了css样式代码，类似 [data-col="1"] { left: 10px; }，这些样式拖动模块的相对位置，如设置为false，你需要手动的定义这些模块的位置（top和left） |
| avoid_overlapped_widgets | 默认true,是否允许堆叠单元格，如果容器最大宽度是3，第一行有2个单元格，每个单元格的宽度是2，如果是true,那么这两个单元格会显示成两行，如果是false,那么这两个单元格显示成一行 |
| serialize_params | 使用serialize()方法时会回调这个方法， serialize_params:function($w, wgd) { return { col: wgd.col, row: wgd.row, size_x: wgd.size_x,size_y: wgd.size_y } } |
| draggable.start | 开始拖动的回调函数function(event, ui){} |
| draggable.drag | 拖动时的回调函数function(event, ui){} |
| draggable.stop | 停止拖动时的回调函数function(event, ui){} |
| collision.on_overlap_start | function(collider_data) { } A callback for the first time when a widget enters a new grid cell. 被选择的单元格第一次进入一个单元格时的事件 |
| collision.on_overlap | function(collider_data) { } A callback for each time a widget moves inside a grid cell. 一个单元格与另外一个单元格交互时的事件 |
| collision.on_overlap_stop | function(collider_data) { } A callback for the first time when a widget leaves its old grid cell. 两个单元格交互后，离开时的事件 |
使用方法
//属性的使用方法
var gridster;
$(function () {
// 初始化对象
gridster = $(".gridster > ul").gridster({
widget_margins: [15, 15],
widget_base_dimensions: [100, 100],
//定义按住样式为.handle才允许拖动
//css筛选器对象也可以是标签和ID
draggable: {
handle: '.handle',
// 开始拖动的回调函数 www.itxst.com
start: function (e, ui, $widget) {
console.log( $widget)
},
}
}).data('gridster');
var widgets = [
['<li><lable class="handle"></lable>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)
});
});
