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

ご覧ください: https://github.com/qooxdoo/qooxdoo/blob/master/application/mobileshowcase/source/class/mobileshowcase/page/Maps.js

この例にはいくつかの重要な点があります。メソッド「_createContent」および「_c​​reateScrollContainer()」はオーバーライドされます。

NavigationPage は、デフォルトで、すべてのウィジェットを配置できる iScroll コンテナを作成します。もちろん、OpenLayer div は qooxdoo ウィジェットではありません。独自のスクロール ロジックがあります。そのため、これらのメソッドを上書きする必要があります。OpenLayer のスタイリングの多くは変更できません。OpenLayer は、絶対配置があるため、すべてのコンテンツをオーバーレイします。

しかし、解決策があります：

このメソッドを initialize() メソッドで使用します

this.addAfterNavigationBar(widget);

CSS クラスをウィジェットに割り当てます。

 widget.addCssClass("your-class")

リソース フォルダーの「styles.css」を変更します。

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

グリーツ・クリストファー

于 2012-10-22T08:41:16.117 に答える
0

ツールバーをマップにmaps.add(toolbar)追加すると、マップ div に追加されるのはそのためです。GUIに個別の要素を追加するには、page.Managerを通過する必要があると思います。マップ ショーケースのように、NavigationPage から派生したウィジェットも含めて、まさにそれを実現するモバイル チュートリアルを修正することをお勧めします。

于 2012-10-13T08:33:53.877 に答える