Question

我一直在互联网上寻找解决方案，但我没有找到任何解决方案在我的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"
    });
}

Answer 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>

Answer 2

试试这个

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>

jQuery Mobile对话框BLANK

2 个答案: