-1

我最近开始为 iOS 开发 phonegap，之前没有 Web 开发经验。我试图在以下代码的帮助下使用 jQuery 在按钮单击时加载下一个 html 文件：

$.mobile.changePage( "inbox.html", { transition: "slideup" });

但它根本不起作用。我已经尝试通过传递 inbox.html 的 ID 但仍然是徒劳的。我最终使用window.location.href = 'inbox.html'which doesn't support transitions

我的 pagebeforeshow 方法也永远不会被调用

$('#page-3').on('pagebeforeshow', function () {
                                            navigator.notification.alert("inbox");
                                            });

我正在使用 cordova-1.6.0 和 jquery-1.3 版本。我可能做错了什么？

4

1 回答 1

1

页面转换问题

此代码在 Android Phonegap 项目中运行，使用它来修复您的代码：

HTML 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 type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>   
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    <script>
        $(document).on('pagebeforeshow', '#index', function(){       
            $(document).on('click', '#slide-me', function(){       
                $.mobile.changePage( "second.html", { transition: "slideup" });
            });
        });
            $(document).on('pagebeforeshow', '#page-3',function () {
                alert("Second page");
            });         
    </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 data-role="button" id="slide-me">Slideup</a>
        </div>
    </div>
</body>
</html>

HTML 2：

<!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 type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>   
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    <script>

    </script>   
</head>
<body>
    <div data-role="page" id="page-3">
        <div data-theme="a" data-role="header">
            <h3>
                Second page
            </h3>
        </div>        
        <div data-role="content">
            This is a second.html
        </div>
    </div>
</body>
</html>

Pagebeforeshow 错误

这在我的示例中也有效，但在您的情况下可能存在 2 个不同的问题：

页面事件从 HEAD 执行

如果此页面事件是从放置在 HEAD 内的脚本标记执行的（在第一个加载的 HTML 文件内 - 这将在第二种可能性中解释），那么您需要以不同的方式绑定它：

$(document).on('pagebeforeshow', '#page-3',function () {
    alert("Second page");
});

如果您从放置在第二个文件 HTML 中的 HEAD 内容执行此代码

jQuery Mobile 使用 ajax 将页面加载到 DOM 中。因此，在第一个页面之后加载的所有页面都只会将 BODY 内容加载到 DOM 中。HEAD 将被丢弃。

如您所见，在我的示例中，pagebefpreshow 放置在第一个 index.html 页面中。如果您仍然想分离 javascript，请将其放在 BODY 内容中，如下所示：

<html>
    <body>
       <script>
           // Your js code
       </script>
       // Rest of the page
    </body>
</html>

如果您想了解更多信息，请阅读我的另一篇文章：为什么我必须将所有脚本放在 jquery mobile 中的 index.html 中

于 2013-04-29T12:14:34.080 回答