阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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的教程都有!

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

      目录
      目录