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。

.resize_widget($ widget,[ size_x],[ size_y],[ reposition],[ callback])

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

参数 * $ 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()

禁用拖动。

返回

返回 Gridster 类的实例。

浏览器支持

Gridster 支持 Internet Explorer 9 +,Firefox,Chrome,Safari 和 Opera。

Github: https://github.com/ducksboard/gridster.js

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

抖音号

抖音号: axihe

Anbang
axihe
本文目录 JQ插件 面试题 学习思路
axihe