首页 > 编程语言> > javascript – 如何使dhtmlx响应？

javascript – 如何使dhtmlx响应？

2019-07-06 11:35:29 作者：互联网

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

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

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

这不是讨论 – 我不希望我的问题被关闭 – 我只需要一个答案来指导我以正确的方式,但我非常感谢在正确的地方进行答案讨论.

解决方法:

您应该能够将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 onl oad="setLayout()">
  <div id="your-layout-id">...</div>
</body>

标签：javascript,twitter-bootstrap-3,responsive-design,dhtmlx
来源： https://codeday.me/bug/20190706/1397107.html