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

【问题标题】：$.mobile.changePage doesn't work on Phonegap?$.mobile.changePage 在 Phonegap 上不起作用？
【发布时间】：2011-07-19 12:28:14
【问题描述】：

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

这是我的页面 .html 的代码。有解决办法吗？

页面索引.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>

页面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：对不起我的英语，我是意大利人;）

【问题讨论】：

你能粘贴changePage函数吗？
添加了 jquery-mobile 标记，希望能将一些 JQuery Mobile 人带到这里来。

标签： jquery mobile jquery-mobile cordova

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

试试

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

【讨论】：

【解决方案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() 电话无论如何都不会与他们一起工作

【讨论】：

【解决方案4】：

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

您正在使用它的 ID 'personale'

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

$("#personale")

那就试试吧

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

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

这样可以在切换页面时节省一些加载时间。

【讨论】：