jquery - 使 jDashboard 响应式

Question

jDashboard 是一款出色的仪表板解决方案，适用于希望为其用户创建拖放式 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-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++;
});

Step 3.最后，使用一点 jQuery 来检测和响应窗口宽度做两件事：1）设置 .jdash-columns 低于某个断点时的宽度和 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]);
    });
  }

});