gridstack api翻译

gridstack.js API

Table of Contents generated with DocToc

Options

  • acceptWidgets - if true of jquery selector the grid will accept widgets dragged from other grids or from outside (default:false) See example
  • alwaysShowResizeHandle - if true the resizing handles are shown even if the user is not hovering over the widget (default: false) 如果设置成 true 那么控制大小缩放的手柄即时在用户没有将鼠标移动到组件上都会一直显示。 (默认值: false)
  • animate - turns animation on (default: false) 打开动画效果 (默认值: false)
  • auto - if false gridstack will not initialize existing items (default: true)  如果设置成 false gridstack 将不会初始化已经存在的项 (默认值: true)
  • cellHeight - one cell height (default: 60). Can be:一个单元格的高度
    • an integer (px) 整形
    • a string (ex: '10em', '100px', '10rem') 字符串
    • 0 or null, in which case the library will not generate styles for rows. Everything must be defined in CSS files.0或者null，在这种情况下库将不会为rows自动生成样式。任何元素都必须在css文件被中定义。
    • 'auto' - height will be calculated from cell width. auto 高度将根据单元格宽度计算 
  • ddPlugin - class that implement drag'n'drop functionallity for gridstack. If false grid will be static. (default: null - first available plugin will be used) 实现gridstack拖动的功能的类，如果设置成faslse，网格将是静态的。
  • disableDrag - disallows dragging of widgets (default: false).
  • disableResize - disallows resizing of widgets (default: false).
  • draggable - allows to override jQuery UI draggable options. (default: {handle: '.grid-stack-item-content', scroll: false, appendTo: 'body'})允许重写JQuery UI的拖拽配置项。
  • handle - draggable handle selector (default: '.grid-stack-item-content') 可拖动手柄的选择器 (默认值: '.grid-stack-item-content')
  • handleClass - draggable handle class (e.g. 'grid-stack-item-content'). If set handle is ignored (default: null)
  • height - maximum rows amount. Default is 0 which means no maximum rows 最大行数
  • float - enable floating widgets (default: false) See example 启用浮动控件
  • itemClass - widget class (default: 'grid-stack-item')  部件类，默认是‘grid-stack-item’
  • minWidth - minimal width. If window width is less, grid will be shown in one-column mode (default: 768)最小宽度
  • oneColumnModeClass - class set on grid when in one column mode (default: 'grid-stack-one-column-mode')
  • placeholderClass - class for placeholder (default: 'grid-stack-placeholder') 占位符类
  • placeholderText - placeholder default content (default: '') 占位符的文本信息
  • resizable - allows to override jQuery UI resizable options. (default: {autoHide: true, handles: 'se'})允许重写JQueryUI的缩放配置项
  • removable - if true widgets could be removed by dragging outside of the grid. It could also be a jQuery selector string, in this case widgets will be removed by dropping them there (default: false) See example如果设置成true控件将能被拖拽到表格的外面。他也可以是一个JQuery的选择器的名称字符串，在这种情况下控件将会被遗弃。
  • removeTimeout - time in milliseconds before widget is being removed while dragging outside of the grid. (default: 2000)移除延时
  • rtl - if true turns grid to RTL. Possible values are true, false, 'auto' (default: 'auto') See example
  • staticGrid - makes grid static (default false). If true widgets are not movable/resizable. You don't even need jQueryUI draggable/resizable. A CSS class grid-stack-static is also added to the container.
  • verticalMargin - vertical gap size (default: 20). Can be:垂直间距大小
    • an integer (px)
    • a string (ex: '2em', '20px', '2rem')
  • width - amount of columns (default: 12) 列的数量

Grid attributes

  • data-gs-animate - turns animation on 开启动画效果
  • data-gs-width - amount of columns  列的数量
  • data-gs-height - maximum rows amount. Default is 0 which means no maximum rows. 最大行数量。默认值是 0 意思是没有最大的行数
  • data-gs-current-height - current rows amount. Set by the library only. Can be used by the CSS rules. 当前行的数量。只能通过库文件配置，可以使用css规则

Item attributes

  • data-gs-x, data-gs-y - element position 元素位置
  • data-gs-width, data-gs-height - element size 元素尺寸
  • data-gs-max-width, data-gs-min-width, data-gs-max-height, data-gs-min-height - element constraints 元素约束
  • data-gs-no-resize - disable element resizing 禁用元素缩放
  • data-gs-no-move - disable element moving 禁用元素移动
  • data-gs-auto-position - tells to ignore data-gs-x and data-gs-y attributes and to place element to the first available position 
  • data-gs-locked - the widget will be locked. It means another widget wouldn't be able to move it during dragging or resizing. The widget can still be dragged or resized. You need to add data-gs-no-resize and data-gs-no-move attributes to completely lock the widget. - 部件将会被锁定，这意味着另一个部件在拖动和缩放的时候不允许移动它 。但是该部件仍然能够被拖动和缩放，所以你需要添加 data-gs-no-resize 和 data-gs-no-move属性来完全锁定该部件。

Events

added(event, items)

$('.grid-stack').on('added', function(event, items) {
    for (var i = 0; i < items.length; i++) {
      console.log('item added');
      console.log(items[i]);
    }
});

change(event, items)

Occurs when adding/removing widgets or existing widgets change their position/size

var serializeWidgetMap = function(items) {
    console.log(items);
};

$('.grid-stack').on('change', function(event, items) {
    serializeWidgetMap(items);
});

disable(event)

$('.grid-stack').on('disable', function(event) {
    var grid = event.target;
});

dragstart(event, ui)

$('.grid-stack').on('dragstart', function(event, ui) {
    var grid = this;
    var element = event.target;
});

dragstop(event, ui)

$('.grid-stack').on('dragstop', function(event, ui) {
    var grid = this;
    var element = event.target;
});

enable(event)

$('.grid-stack').on('enable', function(event) {
    var grid = event.target;
});

removed(event, items)

$('.grid-stack').on('removed', function(event, items) {
    for (var i = 0; i < items.length; i++) {
      console.log('item removed');
      console.log(items[i]);
    }
});

resizestart(event, ui)

$('.grid-stack').on('resizestart', function(event, ui) {
    var grid = this;
    var element = event.target;
});

resizestop(event, ui)

$('.grid-stack').on('resizestop', function(event, ui) {
var grid = this;
var element = event.target;
});  




posted @ 2017-03-03 10:47  EasonTuring  阅读(4908)  评论(0)  编辑  收藏  举报