Question

我最近开始研究iOS的phonegap，没有任何Web开发经验。我试图在jQuery的按钮点击下加载下一个html文件，并提供以下代码：

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

但它根本不起作用。我尝试过传递inbox.html的ID，但仍然徒劳无功。我最终使用了不支持转换的window.location.href = 'inbox.html'

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

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

我使用的是cordova-1.6.0和jquery-1.3版本。我怎么可能做错了？

Answer 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错误

这也适用于我的示例，但在您的情况下可能存在两个不同的问题：

页面事件从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>

如果您想了解更多内容，请阅读我的其他文章： Why I have to put all the script to index.html in jquery mobile

页面转换和pagebeforeshow方法 - jQuery-PhoneGap-iOS？

1 个答案:

页面转换问题

Pagebeforeshow错误

页面事件从HEAD

如果从位于第二个文件HTML