0

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

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

我可以显示对话框，但它在显示 Page2 之后显示（如闪烁）。取消（使用 data-rel:back）总是返回到 Page2 并最终进入无限循环。

谁能帮我这个？

我尽力解释这一点。让我知道这是否不完全清楚。

4

1 回答 1

1

像这样的东西：http: //jsfiddle.net/Gajotres/7RQaM/

<!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 个页面。所以最好的办法是显示对话框并让用户选择要做什么。

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

编辑 ：

我错了，可以这样做：

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

基本上你想要做的是显示对话框而不显示 page2。并覆盖其关闭按钮以更改您想要的页面。$('[title="关闭"]').off(); 在这里删除先前的事件。

我还从顶部更改了一个示例。

于 2013-01-21T18:51:48.157 回答