Question

我的方法$ .mobile.changePage有问题，实际上这个方法，当我用phonegap转换应用程序时，不起作用。

这是我的网页代码.html。有解决方案吗？

Page index.html

<!DOCTYPE html>
<html>
<head>
    <title>Prova </title>

    <link rel="stylesheet" href="css/jquery.mobile-1.0b1.css" />
    <script src="js/jquery-1.6.1.min.js"></script>
    <script src="js/jquery.mobile-1.0b1.js"></script>

    <script>
    $(document).ready(function() {

        $('#linkpersonale').click(function() {
            $.mobile.changePage("#personale", null, true, true);
        });

    });
    </script>


</head>
<body>

<div data-role="page" id="home">

<header data-role="header">
    <h1>Prova Page1</h1>
</header>

<div data-role="content" id="content">


    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b" data-counttheme="d">
        <li>
            <a class="ui-link-inherit" id="linkpersonale">
                <h3 class="ui-li-heading">Personale</h3>
                <p class="ui-li-desc">...</p>
            </a>
        </li>
    </ul>

</div>


<footer data-role="footer" data-role="footer" data-id="footer-nav" data-position="fixed">
    <div data-role="navbar" id="navbar_home">
        <ul>
            <li><a href="#home" data-icon="home" data-iconpos="top" data-theme="a">Home</a></li>
        </ul>
    </div>
</footer>

</div>

</body>
</html>

Page personale.html

<!DOCTYPE html>
<html>
<head>
    <title>Prova </title>

</head>
<body>


<div data-role="page" id="personale">

<header data-role="header">
    <h1>Prova Pag2</h1>
</header>


<div data-role="content">

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b" data-counttheme="d">
    <li>
        <a class="ui-link-inherit" href="#">
            <h3 class="ui-li-heading">Etc etc</h3>
            <p class="ui-li-desc">...</p>
        </a>
    </li>

</ul>

</div>

<footer data-role="footer" data-role="footer" data-id="footer-nav" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="home" data-icon="home" data-iconpos="top" data-theme="a" data-transition="slide">Home</a></li>
        </ul>
    </div>
</footer>

</div>

</body>
</html>

一些建议？ PS：对不起我的英语，我是意大利人;）

Answer 1

PhoneGap是一个红鲱鱼。你应该将它测试为普通的旧jQM代码，你会发现它在那里也不起作用。这是因为您在不包含它的HTML文件中引用了div（index.html）。

我会尝试在changePage()而不是personale.html上调用#personale。

来自$.mobile.changePage()上的文档：

to参数可以接受字符串（例如文件url或本地元素的ID）......

Answer 2

尝试

$.mobile.changePage("personale.html", null, true, true);

Answer 3

我认为这是问题所在：

$.mobile.changePage("#personale", null, true, true);

因为personale.html是一个不同的文件，我认为你需要添加.html。而是尝试

$.mobile.changePage("personale.html", null, true, true);

如果您想使用之前的代码，则只需将personale.html代码添加到pageindex.html页面即可。无论如何都会显示正确的页面，然后你可以像你一样切换IDS。

PageIndex.html：

<div data-role="page" id="home">
<!-- CODE -->
</div>
<div data-role="page" id="personale">
<!-- CODE -->
</div>

注意：这会导致黑莓和HTC手机以及许多其他手机出错。他们会同时看到两个页面。另一方面，任何mobile.changePage()电话无论如何都不适用于他们

Answer 4

如在其他答案中所述，您可以将页面更改为“pagename.html”或其ID。

您正在使用它的ID'personale'

在这种情况下，您应该使用JQ符号表示您正在使用变量（= $）：

$("#personale")

所以试试

$.mobile.changePage($("#personale"), null, true, true);

还有一件事，你知道在移动html页面中你可以将更多的页面元素放在一个文件中，对吗？

切换页面时节省了一些加载时间。

$ .mobile.changePage在Phonegap上不起作用？

4 个答案: