0

您好我在这里使用移动地图演示：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);

谢谢您的帮助！

4

2 回答 2

0

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

于 2012-10-13T08:33:53.877 回答
0

看看： 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;
}

问候克里斯托弗

于 2012-10-22T08:41:16.117 回答