0

マッピングに openlayers を使用する jquery-mobile/phonegap アプリがあります。地図を使用するページでは、下の画像を参照してください。フッター メニューの選択に問題があります。

地図のあるページ

たとえば、[ホーム] を選択すると、アプリケーションはキャプチャに移動します。これは、地図を表示するページでのみ発生します。マップは複数の画面間で共有されるため、openlayers で map.render 関数を使用しています。レンダリング機能を削除すると、メニューは期待どおりに機能します。

問題のあるクリックの x 位置を表示するクリック関数を追加しました。x 位置は、クリックされたメニューではなく、移動先のページのメニューの位置を反映していることに注意してください。

メニューは次のとおりです。

  <div class="menu" data-role="footer" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li>
          <a href="index.html"
             class="home-button"
             data-icon="custom">Home</a>
        </li>
        <li>
          <a href="map.html"
             class="map-button ui-btn-active"
             data-icon="custom">Map</a>
        </li>
        <li>
          <a href="capture.html"
             class="capture-button"
             data-icon="custom">Capture</a>
        </li>
        <li>
          <a href="download.html"
             class="download-button"
             data-icon="custom">Download</a>
        </li>
      </ul>
    </div>

data-role="footer" div を削除すると、navbar メニューが期待どおりに機能します。

注: これは、Android 2.3.5 のみを使用する Samsung デバイスで再現されています。Android 2.3.6、4+、およびテストした他のすべてのモデルを搭載した Samsung デバイスで問題なく動作します。

使用：openlayers 1.12 jquery-mobile：1.2.0（1.3.0も試しました）

4

1 に答える 1

0

フッターの z-index を設定すると、この問題が解決されました。

.ui-footer {
    z-index: 10000;
}
于 2013-02-26T17:55:49.160 に答える