0

私はインターネットで解決策を探していましたが、何も見つかりませんでした。
私の jQuery Mobile アプリケーションには、ワークフローをクリーンに保つために、それぞれがページを表す複数の HTML ファイルがあるため、ナビゲーションには AJAX を使用しています。
ページのマップ上にfleet.htmlダイアログを開くボタン (ナビゲーションの 3 番目) があります。開くプロセスはjavascriptで行われます。ボタンをクリックすると、テキストもボタンもない空白のダイアログが表示されます。
ここにありfleet.htmlます：

<div data-role="page" id="fleetPage" class="no-bg">
    <div data-role="header" data-theme="b">
        <h1>Flotte</h1>
    </div>
    <div data-role="content" data-theme="a">
        <div class="map-container">
            <div id="fleet-map"></div>
        </div><!-- END map-container -->
    </div><!-- END content -->

    <div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
        <div data-role="header" data-theme="b">
            <h3>Informations</h3>
        </div>
        <div data-role="content">
            <p>POI Infos</p>
        </div>
    </div>

</div><!-- END page -->

ダイアログを開く方法は次のとおりです。 

function onSelectFeature() {
    $("#fleetPage #deviceInfoDialog").dialog();
    $.mobile.changePage($("#fleetPage #deviceInfoDialog"), {
        transition: "slidedown"
    });
}
4

2 に答える 2

1

ダイアログ div をページ div の外に移動します。クリックするとダイアログが開く隠しリンクを追加します。スクリプト関数を作り直して、そのリンクがクリックされるのをエミュレートします。

私はこれをテストしましたが、うまくいきます：

<div data-role="page" id="fleetPage" class="no-bg">
    <div data-role="header" data-theme="b">
        <h1>Flotte</h1>
    </div>
    <div data-role="content" data-theme="a">
        <div class="map-container">
            <div id="fleet-map"> <a href="javascript: onSelectFeature();">onSelectFeature</a></div>
        </div><!-- END map-container -->
    </div><!-- END content -->


    <script>
        function onSelectFeature() {
            $("#lnkDeviceInfoDialog").click();
        }
    </script>

    <a id='lnkDeviceInfoDialog' href="#deviceInfoDialog" data-rel="dialog" data-transition="slidedown" style='display:none;'></a>


</div><!-- END page -->

<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
    <div data-role="header" data-theme="b">
        <h3>Informations</h3>
    </div>
    <div data-role="content">
        <p>POI Infos</p>
    </div>
</div>
于 2013-08-08T13:19:54.720 に答える
0

これを試して

function onSelectFeature() {
    $.mobile.changePage( "#deviceInfoDialog", { role: "dialog", transition: "slidedown" } );
}

そして、あなたのhtmlは次のようになるはずです

<div data-role="page" id="fleetPage" class="no-bg">
    <div data-role="header" data-theme="b">
        <h1>Flotte</h1>
    </div>
    <div data-role="content" data-theme="a">
        <div class="map-container">
            <div id="fleet-map"></div>
        </div><!-- END map-container -->
    </div><!-- END content -->
</div><!-- END page -->

    <div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
        <div data-role="header" data-theme="b">
            <h3>Informations</h3>
        </div>
        <div data-role="content">
            <p>POI Infos</p>
        </div>
    </div>
于 2013-08-08T13:02:56.230 に答える