Qooxdoo - 移动地图封面工具栏答案

【问题标题】：Qooxdoo - Mobile Map covers toolbarQooxdoo - 移动地图封面工具栏
【发布时间】：2012-10-12 19:45:21
【问题描述】：

您好，我在这里使用移动地图演示：http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fmaps

我试图在地图页面的底部添加一个工具栏。它有效，但随后地图很快将其覆盖。查看 DOM 后，工具栏似乎被添加到地图 div 中。

有没有办法让它出现在地图上方而不是下方？此代码全部包含在 Application.js 文件中。

 var maps = test.page.Maps.getInstance();
 var manager = new qx.ui.mobile.page.Manager(false);
  manager.addDetail([
    maps
  ]);
  maps.show();


  var toolbar = this.__toolbar = new qx.ui.mobile.toolbar.ToolBar();
  maps.add(toolbar);

感谢您的帮助！

【问题讨论】：

标签： qooxdoo

【解决方案1】：

使用maps.add(toolbar)，您将工具栏添加到地图，这就是它被添加到地图 div 的原因。我想您必须通过 page.Manager 才能将单独的元素添加到 GUI。您可能想要修改 mobile tutorial 来实现这一点，还包括一个从 NavigationPage 派生的小部件，就像在地图展示中一样。

【讨论】：

嘿@ThomasH，我尝试将其添加到地图上方的视图中，但随后将其放置在页面顶部。我可能不得不对其进行修补，直到它起作用，但我希望 z-index 更改或类似的东西可以修复它，因为它最初出现在正确的位置，直到地图覆盖它。 ;-) 感谢您的回复！

【解决方案2】：

看看： https://github.com/qooxdoo/qooxdoo/blob/master/application/mobileshowcase/source/class/mobileshowcase/page/Maps.js

这个例子中有几件重要的事情。方法“_createContent”和“_createScrollContainer()”被覆盖。

默认情况下，NavigationPage 会创建一个 iScroll 容器，您可以将所有小部件放入其中。但是 OpenLayer div 当然不是 qooxdoo 小部件。它有自己的滚动逻辑。这就是为什么，你必须覆盖这些方法。 OpenLayer 的大部分样式都无法更改。 OpenLayer 覆盖所有内容，因为它具有绝对定位。

但是有一个解决办法：

在 initalize() 方法中使用该方法

this.addAfterNavigationBar(widget);

通过

为您的小部件分配一个 CSS 类

 widget.addCssClass("your-class")

更改资源文件夹中的“styles.css”：

.your-class {
  z-index: 5000;
  position: absolute;
}

问候克里斯托弗

【讨论】：

我完全按照所写的方式尝试了该解决方案，但它似乎不起作用。我可能错过了什么？谢谢！