使jDashboard自适应

Matt Borja 发表于 Dev

马特·波雅（Matt Borja）

对于希望为其用户创建拖放UI的开发人员而言，jDashboard是出色的Dashboard解决方案。但是，响应部门非常缺乏此功能。

如何使jDashboard更具响应性？

马特·波雅（Matt Borja）

步骤1.将一些@media断点引入CSS文件中，如下所示：

.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-columns的原始宽度：

// 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列的宽度，以及2）恢复.jdash的原始[存储]宽度-高于某个断点时的列。见下文：

$(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]);
    });
  }

});