Question

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

我的想法：我注意到了一些事情，如果我根据使用的不同媒体动态更改DHTMLX布局，这可能是一个解决方案，例如：在其中一个页面上我有一个2U布局在桌面屏幕上显示得很好，但它可怕地显示在智能手机设备上 - 较窄的媒体 - 所以2U必须转换为2E，这使得它至少更容易查看和使用

我的问题 - 或者问题 - ：我是否考虑过最简单的方法来使我的网络应用程序响应，甚至是我正在尝试做的是响应概念？

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

Answer 1

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

<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>

如何使dhtmlx响应？

1 个答案: