gridster.js 中文文档

gridster.js 方法列表

gridster.js100多个函数方法,我们将列举add_widget resize_widget remove_widget remove_all_widgets serialize serialize_changed enable disable enable_resize disable_resize这几个常用的函数,其余函数请查看文章结尾的连接。

add_widget 添加单元格

.add_widget( html, [size_x], [size_y], [col], [row] )
   参数
 html String | HTMLElement,需要被添加的单元格
 size_xNumber,占几列
 size_y Number,占几行
 col Number,列起始位置
 row Number,行起始位置
 返回值
 HTMLElementjquery对象

在线例子

resize_widget 修改单元格大小

.resize_widget( $widget, [size_x], [size_y], [reposition], [callback] )
参数
 $widget 需要调整单元格的jquery对象
 size_x需要调整的宽度(占几列)
 size_y 需要调整的高度(占几行)
返回值
 HTMLElement被调整的单元格jquery对象

在线例子

remove_widget 移除单元格

remove_widget( el, [callback] )
参数
 el HTMLElement,单元格的jquery对象
 callback移除单元格后的回调函数  
返回值
 Gridster实例

在线例子

serialize 返回单元格位置

.serialize( [$widgets] )
参数
 $widgets HTMLElement,单元格的jquery对象,如果不传默认为全部单元格
返回值
 Array相关单元格位置

在线例子

serialize_changed

.serialize_changed()
 返回值
 Array创建一个对象数组,表示已更改位置的小部件的当前位置。

enable

.enable(),允许拖动
   返回值
 Gridster 实例

disable

.disable(),禁止拖动
   返回值
 Gridster 实例

其他函数

http://dsmorse.github.io/gridster.js/docs/classes/Gridster.html

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