使jDashboard响应

Question

jDashboard是一款出色的Dashboard解决方案，适用于希望为其用户创建拖放式UI的开发人员。但是，响应部门非常缺乏。

如何使jDashboard更具响应性？

Answer 1

第1步。在CSS文件中引入一些@media断点，如下所示：

.jdash-column {
  float: left;
  min-height: 1px;
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .jdash-column {
    float: left;
    min-height: 1px;
  }
}

@media only screen and (max-width: 767px) {
  .jdash-column {
    float: none;
    width: 100%;
  }
}

第2步。按以下方式存储呈现的.jdash列的原始宽度：

// Preserve original widths (TODO: Refactor to use .data())
var col_widths = new Object();
var uniq_col_id = 1;
$('.jdash-column').each(function() {
  var jdash_col_id = 'jdash_col-' + uniq_col_id;
  $(this).attr('id', jdash_col_id);
  col_widths[jdash_col_id] = $(this).css('width');
  uniq_col_id++;
});

第3步。最后，使用一点jQuery来检测并响应窗口宽度，做两件事：1）在某个断点下面设置.jdash-columns的宽度和2）在某个断点之上恢复.jdash-columns的原始[存储]宽度。见下文：

$(window).resize(function() {
  var window_width = $(window).width();

  if(window_width <= 767) {
    $('.jdash-column').each(function() {
      var jdash_col_id = $(this).attr('id');
      $(this).css('width', '100%');
    });
  }

  if(window_width >= 768) {
    $('.jdash-column').each(function() {
      var jdash_col_id = $(this).attr('id');
      $(this).css('width', col_widths[jdash_col_id]);
    });
  }

});