0

我有一个 jQuery-Mobile对话框，我从我的页面打开，main.html如下所示：

$.mobile.changePage("settings.html", {
    role: "dialog",
    transiation: "pop",
    changeHash: true
});

现在我想在我的网站上收到一个回调main.html，当对话框关闭时，我可以继续处理对话框中输入的信息。

更新：提到我应该在我的初始位置收到回调main.html

4

2 回答 2

2

解决方案

对话框只是经典 jQuery Mobile 页面的另一个版本，因此也可以使用页面事件。

您要使用的是pagebeforehide事件。

工作示例：http: //jsfiddle.net/Gajotres/cbc5q/

$(document).on('pagebeforehide', '#second', function(){       
    alert('Close Dialog');
});

您使用的其他事件很少，您可以在这篇文章中找到它们，只需查找名为：页面事件转换顺序的章节

证明

因为您使用了几个 HTML 页面，所以我为您制作了一个由 2 个 HTML 文件组成的工作示例：

索引.html

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>    
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>   
    <script>
        $(document).on('pagebeforeshow', '#index',function (e, data) {
            var prevPage = data.prevPage.attr('id');
            if(prevPage === 'second'){
                alert('sdfs');
            }
        }); 
    </script>       
</head>
<body>
    <div data-role="page" id="index">       
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content">
            <a href="dialog.html" data-role="button">Open dialog</a>
        </div>

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

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

对话框.html

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>    
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>   

</head>
<body>
    <div data-role="dialog" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
        </div>

        <div data-role="content">
            <a href="index.html" data-role="button">close Dialog</a>
        </div>

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

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

首先请注意，在 dialog.html 中，javascript 被放置在页面/对话框 div 中。这是因为 jQuery Mobile 在打开其他页面时会剥离 HEAD 内容 + 其他所有内容。这就是为什么将 javascript 放置在页面/对话框 div 中的原因。

这应该这样做：

$(document).on('pagebeforeshow', '#index',function (e, data) {
    var prevPage = data.prevPage.attr('id');
    if(prevPage === 'second'){
        alert('sdfs');
    }
});

此代码将在初始页面上触发，就在它显示之前。如果上一页是对话框，则执行一个动作。

于 2013-07-19T08:23:50.687 回答
0

我想出了一个古怪的方法来实现我想要的：

$(document).on( "dialogcreate", function( event, ui ) {
    $(document).one('pagechange', function (e, f) {
        $(document).one('pagechange', function (e, f) {
           console.log('Settings closed');
        });
    });
});

解释：

  1. 创建对话框时，将dialogcreate引发事件
  2. 然后我注册一个 pagechange事件，该事件在 jquery-mobile 打开一个对话框时引发。所以现在对话框打开了
  3. 现在我注册另一个pagechange事件，当对话框关闭并且我回到原来的位置时将抛出该事件。

pagechange请注意，如果设置对话框在最终被解除之前触发了另一个事件，这将不起作用。但是，这在我的情况下有效。

我希望有一个更清洁的方法来解决这个问题。我想知道为什么没有像dialogclose事件这样的东西。

于 2013-07-19T08:19:33.680 回答