2

我正在使用此代码使 gridster 响应：https ://github.com/ducksboard/gridster.js/issues/77

为什么最右边 data-col 中的小部件会跳到下面的行？ http://jsfiddle.net/nxmRr/30/

(function($) {
  var extensions = {
    resize_widget_dimensions: function(options) {
      if (options.widget_margins) {
        this.options.widget_margins = options.widget_margins;
      }

      if (options.widget_base_dimensions) {
        this.options.widget_base_dimensions = options.widget_base_dimensions;
      }

      this.min_widget_width = (this.options.widget_margins[0] * 2) + this.options.widget_base_dimensions[0];
      this.min_widget_height = (this.options.widget_margins[1] * 2) + this.options.widget_base_dimensions[1];

      var serializedGrid = this.serialize();
      this.$widgets.each($.proxy(function(i, widget) {
        var $widget = $(widget);
        var data = serializedGrid[i];
        this.resize_widget($widget, data.sizex, data.sizey);
      }, this));

      this.generate_grid_and_stylesheet();
      this.get_widgets_from_DOM();
      this.set_dom_grid_height();
      return false;
    }
  };
  $.extend($.Gridster, extensions);
})(jQuery);

var ISP = ISP || {};

ISP.DashboardController = (function($, window, document, undefined) {
  var public = {};

  var COLS          = 6,
      MARGINS_RATIO = 0.1,
      RESIZE_TIME   = 500,
      SELECTOR      = '.gridster ul';

  var container,
      grister,
      resizeTimer;

  function calculateNewDimensions() {
    var containerWidth = container.innerWidth();
    var newMargin      = containerWidth*MARGINS_RATIO / (COLS*2);
    var newSize        = containerWidth*(1-MARGINS_RATIO) / COLS;
    return [[newSize, newSize], [newMargin, newMargin]];
  }

  function resizeWidgetDimensions() {
    // Calculate widget dimension proportional to parent dimension.
    var newDimensions = calculateNewDimensions();

    // Set new "fluid" widget dimensions
    gridster.resize_widget_dimensions({
      widget_base_dimensions: newDimensions[0],
      widget_margins: newDimensions[1]
    });
  }

  function hookWidgetResizer() {
    resizeWidgetDimensions();

    $(window).resize(function() {
      window.clearTimeout(resizeTimer);
      resizeTimer = window.setTimeout(function() {
        resizeWidgetDimensions();
      }, RESIZE_TIME);
    }); 
  }

  public.init = function(elem) {
    container = elem;
    // Initialize gridster and get API reference.
      gridster  = $(SELECTOR, elem).gridster({shift_larger_widgets_down: false, 
                                             max_size_x: 16,
        max_cols: 7
                                             }).data('gridster');

    hookWidgetResizer();
  }

  // expose public API
  return public;
}(jQuery, window, document));

ISP.DashboardController.init($('#dashboard'));

HTML：

<div id="dashboard">
    <div class="gridster">
        <ul>

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

          </ul>
    </div>
</div>

当上面有一排小部件时，不会发生这种情况。 http://jsfiddle.net/nxmRr/29/

4

0 回答 0