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 の動作により、ページ 2 が一瞬だけ表示されます。しかし、これを修正できたとしても。ダイアログを閉じて page2 に戻ると、pagebefpreshow がまだページをダイアログ ボックスに変更しようとしているため、再びダイアログ ボックスが表示されます。

編集 ：

私は間違っていました、それは次のように行うことができます：

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

基本的にやりたいことは、page2 を表示せずにダイアログを表示することです。そして、その閉じるボタンをオーバーライドして、必要な場所で changePage にします。$('[title="閉じる"]').off(); 前のイベントを削除するためにここにあります。

上からの例も変更しました。

于 2013-01-21T18:51:48.157 に答える