简体   繁体   English

如何使 dhtmlx 布局响应?

[英]How to make dhtmlx layout responsive?

My Problem: I use Bootstrap and DHTMLX to build a web application, the application has a home page, sidebar and different other pages in which I use DHTMLX to build layout, grids and I use other DHTMLX components.我的问题:我使用 Bootstrap 和 DHTMLX 来构建一个 Web 应用程序,该应用程序有一个主页、侧边栏和不同的其他页面,我在其中使用 DHTMLX 来构建布局、网格和我使用其他 DHTMLX 组件。 I managed to make my home page responsive, also other HTML components are displayed perfectly in different devices but my problem is with DHTMLX layout and grid which is never made to be responsive, I have been looking and trying to find a way to make it responsive as I have numerous number of pages but each page have can have a layout pattern of DHTMLX (mostly used are 1C,2U,3L, 3T, 3U multilevel of layouts are used too)我设法让我的主页响应,其他 HTML 组件也可以在不同的设备上完美显示,但我的问题是 DHTMLX 布局和网格从来没有响应过,我一直在寻找并试图找到一种方法让它响应因为我有很多页面,但每个页面都可以有 DHTMLX 的布局模式(最常用的是 1C、2U、3L、3T、3U 多级布局也被使用)

What I think of doing : Well I noticed something, If I manged to dynamically change DHTMLX layout based on different media used this could be a solution, example: on one of the pages I have a 2U layout which is displayed just fine on a desktop screen, but its horribly displayed on a smart phone device - narrower media- so 2U must be converted to 2E which makes it at least easier to view and use我想做什么:好吧,我注意到了一些事情,如果我设法根据使用的不同媒体动态更改 DHTMLX 布局,这可能是一个解决方案,例如:在其中一个页面上,我有一个 2U 布局,在桌面上显示得很好屏幕,但它在智能手机设备上的显示效果非常糟糕 - 较窄的媒体 - 因此 2U 必须转换为 2E,这样至少更易于查看和使用

My question - or questions - : Am I thinking of the most dummy way to make my web application responsive, or even is what I am trying to do consists with the Responsiveness Concept?我的一个或多个问题:我是否正在考虑使我的 Web 应用程序具有响应性的最愚蠢的方法,或者我正在尝试做的事情是否与响应性概念有关?

This is not a discussion - I dont want my question to be closed- I only need an answer to direct me in the right way,however I highly appreciate an answer discussion in the right place.这不是讨论 - 我不希望我的问题被关闭 - 我只需要一个答案来指导我以正确的方式,但是我非常感谢在正确的地方进行答案讨论。

You should be able to use an onresize handler with an onload handler.您应该能够将 onresize 处理程序与 onload 处理程序一起使用。 You just have to unload the layout and recreated it each time the window is resized:您只需卸载布局并在每次调整窗口大小时重新创建它:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM