如何使dhtmlx布局具有响应式设计？

Question

如何使dhtmlx布局具有响应式设计？

javascripttwitter-bootstrap-3responsive-designdhtmlx

4

我的问题：我使用Bootstrap和DHTMLX构建Web应用程序，该应用程序具有主页、侧边栏和其他不同的页面，在其中我使用DHTMLX构建布局、网格和其他组件。我成功地使我的主页响应式，也可以在不同的设备上完美显示其他HTML组件，但我的问题是DHTMLX布局和网格从未被制作成响应式！我一直在寻找并尝试找到一种方法使其响应式，因为我有众多页面，但每个页面都可以有DHTMLX的布局模式（主要使用1C、2U、3L、3T、3U多级布局）

我想做的事情：我注意到了一些东西，如果我能够根据使用的不同媒体动态更改DHTMLX布局，这可能是一个解决办法，例如：在其中一个页面上，我有一个2U布局，在台式机屏幕上显示得很好，但在智能手机设备上显示得很糟糕-较窄的媒体-因此必须将2U转换为2E，这样至少更容易查看和使用

我的问题或问题：我是否正在考虑最愚蠢的方法来使我的Web应用程序响应式，甚至我所尝试做的是否符合响应性概念？

这不是一次讨论-我不想关闭我的问题-我只需要一个答案来指导我正确，但是我非常感谢在正确的地方进行答案讨论。

- Ragda Awad

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Erik Pukinskis · Accepted Answer

您应该能够在onload处理程序中使用onresize处理程序。每次调整窗口大小时，您只需卸载布局并重新创建即可：

<script>
  var layout
  var currentPattern

  function setLayout() {
    var width = window.innerWidth

    if (width < 600) {
      var pattern = "2E"
    } else {
      var pattern = "2U"
    }

    if (pattern == currentPattern) {
      return
    } else {
      currentPattern = pattern
    }

    if (layout) {
      layout.unload()
    }

    layout = new dhtmlXLayoutObject({
      parent: "your-layout-id",
      pattern: pattern
    })
  }

  window.onresize = setLayout
</script>
<body onload="setLayout()">
  <div id="your-layout-id">...</div>
</body>