阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录