jQuery Gridster

🌙

手机阅读

本文目录结构

插件 jQuery.gridster 中文 API 文档

gridster.js 是一个 jQuery 插件，可以从跨越多列的元素构建直观的可拖动布局，您甚至可以从网格中动态添加和删除元素。

用法

包含依赖项

Gridster 目前是作为 jQuery 插件编写的，因此您需要将其包含在文档的头部。从 jQuery 下载最新版本。

HTML 结构

类名和标签是可自定义的，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>

        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></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>

把它搞定！

Gridster 接受一个参数，一个带有配置选项的哈希。有关详细信息，请参阅文档

$(function(){ //DOM Ready

    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140]
    });

});

使用 API

要掌握 API 对象，请使用 jQuery 数据方法，如下所示：

$(function(){ //DOM Ready

   var gridster = $(".gridster ul").gridster().data('gridster');

});

将新小部件添加到网格中

gridster.add_widget('<li class="new">The HTML of the widget...</li>', 2, 1);

从网格中删除小部件

gridster.remove_widget( $('.gridster li').eq(3) );

获取带元素位置的序列化数组

创建具有所有窗口小部件位置的 JavaScript 对象数组，可以将其编码为 JSON 字符串。

gridster.serialize();

选项

gridster 配置对象。

widget_selector：“li”

定义哪些元素是小部件。可以是 CSS Selector 字符串或 HTMLElements 的 jQuery 集合。

widget_margins：[ 10,10]

小部件的水平和垂直边距。

widget_base_dimensions：[ 140,140]

基本窗口小部件尺寸第一个索引是宽度，第二个是高度。

extra_rows：0

除了已经计算的行之外，还要向网格添加更多行。

extra_cols：0

除了已经计算的行之外，还要向网格添加更多行。

max_cols：null

要创建的最大列数。设置为“null”以禁用。

min_cols：1

要创建的最小列数。

min_rows：15

要创建的最小行数。

max_size_x：false

窗口小部件可以跨越的最大列数。

autogenerate_stylesheet：true

如果为 true，则将自动生成将所有窗口小部件放置在各自列和行中所需的所有 CSS，并将其注入到文档的中。您可以将其设置为 false，并通过数据属性编写您自己的 CSS 目标行和列，如下所示：[ data-col=“1”] { left: 10px; }。

avoid_overlapped_widgets: true

不允许从 DOM 加载的小部件重叠。如果您从数据库加载窗口小部件位置并且它们可能不一致，这将非常有用。

serialize_params：function($w, wgd) { return { col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y } }

一种函数，用于返回每个小部件的序列化数据，在调用 serialize 方法时使用。传递两个参数：$w：jQuery 的 HTML 元素包裹，并且 wgd：网格坐标与键对象 col，row，size_x 和 size_y。

draggable.start: function(event, ui)

拖动开始时的回调。

draggable.drag: function(event, ui)

拖动期间移动鼠标时的回调。

draggable.stop: function(event, ui)

拖动停止时的回调。

resize.enabled: false

设置为 true 以启用拖放小部件大小调整。此设置不会影响该 resize_widget 方法。

resize.axes：[ ‘both’]

可以调整窗口小部件的轴。可以是 x，y 或两者

resize.handle_class: ‘gs-resize-handle’

调整大小句柄使用的 CSS 类名称。

resize.handle_append_to：''

设置有效的 CSS 选择器以将调整大小句柄追加到。如果 value 的计算结果为 false，则将其附加到窗口小部件。

resize.max_size：[ Infinity，Infinity]

调整大小时限制小部件尺寸。数组值应为整数：[max_cols_occupied, max_rows_occupied]

resize.start: function(e, ui, $widget)

调整大小时启动的回调。

resize.resize: function(e, ui, $widget)

调整大小期间执行的回调。

resize.stop: function(e, ui, $widget)

调整大小时停止执行的回调。

collision.on_overlap_start：function（collider_data）

小部件进入新网格单元时第一次回调。

collision.on_overlap：function（collider_data）

每次窗口小部件在网格单元格内移动时的回调。

collision.on_overlap_stop：function（collider_data）

小部件离开旧网格单元时第一次回调。

方法

这些是最常用的方法。如果您想了解更多详细信息，请查看从源代码生成的文档。

add_widget
resize_widget
remove_widget
remove_all_widgets
连载
serialize_changed
启用
禁用
enable_resize
disable_resize

.add_widget（html，[ size_x]，[ size_y]，[ col]，[ row]）

使用给定的 html 创建一个新窗口小部件并将其添加到网格中。

参数

html 字符串| HTMLElement
- 将添加表示小部件的 HTMLElement 字符串。
size_x 号码
- 窗口小部件占用的行数。默认为 1。
size_y 数量
- 窗口小部件占用的列数。默认为 1。
col 号码
- 小部件应该开始的列。
行号
- 小部件应该开始的行。

返回表示已创建的窗口小部件的 jQuery 包装的 HTMLElement。

更改窗口小部件的大小。宽度限制为当前网格宽度。

参数

$ widget HTMLElement
- 代表小部件的 jQuery 包装的 HTMLElement 将被调整大小。
size_x 号码
- 窗口小部件将跨越的行数。默认为当前 size_x。
size_y 数量
- 窗口小部件将跨越的列数。默认为当前 size_y。
重新定位布尔值
- 如果右侧空间不足，则设置为 false 以不将小部件移动到左侧。默认情况下 size_x，仅限于窗口小部件开始的列可用空间，直到右侧的最后一列。

返回表示已调整大小的窗口小部件的 jQuery 包装的 HTMLElement。

.remove_widget（el，[ callback]）

从网格中删除小部件。

参数

el HTMLElement
jQuery 包装了表示要删除的窗口小部件的 HTMLElement。
回调函数
删除窗口小部件时的回调。

返回 Gridster 类的实例。

.serialize（[$widgets]）

创建一个对象数组，表示网格中所有小部件的当前位置。

参数

$widgets HTMLElement

您要序列化的 jQuery 包装 HTMLElements 的集合。如果没有传递参数，则将序列化所有小部件。

返回一个对象数组（准备编码为 JSON 字符串），其中包含 serialize_params 选项指定的数据。

.serialize_changed()

创建一个对象数组，表示已更改位置的窗口小部件的当前位置。

返回一个对象数组（准备编码为 JSON 字符串），其中包含 serialize_params 选项中指定的数据。

.enable()

启用拖动。

返回 Gridster 类的实例。

.disable()

禁用拖动。