Question

我正在使用jQuery Mobile开发一个简单的工作流程。

我正在从Page0（或Page1）切换到Page2。我想让Page2在显示自己之前将Page3（基于条件）显示为对话框。如果我在对话框（页面3）中点击“取消”，我想返回Page0（或Page1）。

我可以显示对话框，但是在显示Page2后显示（如闪烁）。取消（使用data-rel：back）总是返回到Page2，最后以无限循环结束。

任何人都可以帮我吗？

我尽力解释这一点。如果这还不完全清楚，请告诉我。

Answer 1

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="page0">
        <div data-theme="a" data-role="header">
            <h3>
                Page 0
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <a href="#page3" data-role="button" data-rel="dialog">Open dialog</a> 
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>

    <div data-role="dialog" id="page3">

        <div data-role="header" data-theme="d">
            <h1>Dialog</h1>

        </div>

        <div data-role="content" data-theme="c">
            <h1>What do you want to do?</h1>
            <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
            <a href="#page2" data-role="button" data-theme="b">Go to page 2</a>       
            <a href="#page0" data-role="button" data-theme="c">Go back to page 0</a>    
        </div>
    </div>    

    <div data-role="page" id="page2">
        <div data-theme="a" data-role="header">
            <a href="#page0" class="ui-btn-left">Back</a>            
            <h3>
                Page 2
            </h3>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>
</body>
</html>

您无法同时显示2个页面。所以最好的方法是显示对话框并让用户选择要做的事情。

这是主要问题。您可以将页面更改订购到第2页，然后使用某些页面事件（如 pagebeforeshow ）立即切换到第2页。由于jQM的工作方式，page2将在短暂的时刻展示。但即使你能解决这个问题。当您关闭对话框并返回第2页时，它将再次显示一个对话框，因为其 pagebefpreshow 仍在尝试更改页面到对话框。

编辑：

我错了，可以这样做：

$('#page3').live('pagebeforeshow',function(e,data){    
    $('[title="Close"]').off();
    $('[title="Close"]').attr('href','#page2');
});

基本上你要做的是在不显示page2的情况下显示对话框。并覆盖其关闭按钮以更改所需的页面。 $（'[title =“关闭”]'）。off（）; 此处可删除之前的事件。

我也从顶部更改了一个例子。

在加载页面期间加载对话框

1 个答案: